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

问题描述：

The system asks the user to identify the number of records they would like to enter, based on their selection (say 3), the system displays three text boxes.

    <?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 } ?>

So this will generate 3 rows, with the same text boxes. If the user enters a value in the 1st row for entertainment, the company name should get grayed out or vice versa. Similarly it should do the same for the 2nd and 3rd line as well - based on which text box they fill.

How do I do that via js/jquery?

P.S: I am not a good front-end developer, so I could use all the help I can get.

Thanks.

系统要求用户根据他们的选择确定他们想要输入的记录数量（例如3 ），系统显示三个文本框。 p>

 ＆lt;？php for（$ i = 1; $ i＆lt; = $ rows; $ i ++）{？＆gt;  // $ i在这里是3 
＆lt; input type =“text”name =“company_name []”id =“cn []”＆gt;  
＆lt; input type =“text”size =“3”name =“entertainment []”id =“en []”＆gt; 
＆lt;？php}？＆gt; 
  code>  pre  > 
 
 因此，这将生成3行，文本框相同。 如果用户在第一行中输入值以进行娱乐，则公司名称应变灰，反之亦然。 类似地，它也应该对第2行和第3行执行相同的操作 - 基于它们填充的文本框。 p> 
 
 
如何通过js / jquery执行此操作？ p> 
  
 
 PS：我不是一个优秀的前端开发人员，所以我可以使用我能得到的所有帮助。 p> 
 
 
谢谢。 p> 
  div  >

答

First wrap then into <div>.
Element Id should be unique, change it as following

<?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 } ?>

Then here is the 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>

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

相关推荐