系统要求用户根据他们的选择(例如3)确定他们想要输入的记录数,系统显示三个文本框。
<?php for($i=1; $i<=$rows; $i++) { ?> // $i is 3 here
<input type="text" name="company_name[]" id="cn[]">
<input type="text" size="3"name="entertainment[]" id="en[]">
<?php } ?>
因此,这将生成 3 行,具有相同的文本框。如果用户在第 1 行中输入一个值进行娱乐,则公司名称应灰显,反之亦然。同样,它也应该对第 2 行和第 3 行执行相同的操作 - 基于它们填充的文本框。
我如何通过 js/jquery 做到这一点?
PS:我不是一个好的前端开发人员,所以我可以使用我能得到的所有帮助。
谢谢。
首先换行,然后换成<div>
。
元素 ID 应该是唯一的,更改它如下
<?php for($i=1; $i<=$rows; $i++) { ?> // $i is 3 here
<div>
<input type="text" name="company_name[]" onchange="grayOther(this);" id="cn_<?php echo $i ?>">
<input type="text" size="3"name="entertainment[]" onchange="grayOther(this);" id="en_<?php echo $i ?>">
</div>
<?php } ?>
然后这里是 js。
<script>
function grayOther(elem){
elem = $(elem); // convert to jquery object
if (elem.val().length == 0) {
elem.siblings().prop('disabled',false);
}else {
if (elem.is("[name='company_name[]']")){
elem.siblings("[name='entertainment[]']").prop('disabled',true);
}else {
elem.siblings("[name='company_name[]']").prop('disabled',true);
}
}
}
</script>