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

Question

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.

Answer 1

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>