根据用户的选择禁用在多行上动态生成的文本框


Disable text-boxes generated dynamically on multiple rows, based on user's selection

系统要求用户根据他们的选择(例如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>