动态javascript以检测是否选中了复选框并禁用相应的输入字段

Question

When loading a set of input fields dynamically with a PHP For clause, I want to have a checkbox for each of the rows so in case the user checks it, all input fields for that particular row will get disabled.

I need to dynamically adapt the javascript so it will disable each particular row every time the corresponding checkbox is clicked but I don't really know how to achieve it.

Here is my code:

 <?php 
for ($i=0;$i<5;$i++)
     {
   ?>
   <tr>
   <td><input id="includeItem<?=$i?>" type="checkbox" onchange="includeMore" name="item<?=$i?>"></td>
   <td><input name="id<?=$i?> style="color:#888;" disabled="disabled"></td>
   <td><input id="formItems<?=$i?>" class="datepicker" name="date<?=$i?>"></td>
   <td><input id="formItems<?=$i?>" name="description<?=$i?>"></td>
   <td><input id="formItems<?=$i?>" name="amount<?=$i?>"></td>
   </tr>
<?php } ?>

Then my javascript is as follows:

<script>
    function includeMore()  {
        var $check = $('#includeItem');
            if($('#includeItem').is(':checked')) 
                {
                $('#formItems').attr.('disabled','');
                }
            else {
                $('#formItems').attr.('disabled','disabled');
                }
        }

</script>   

Answer 1

First you need to add the change event listener

var $checkboxes = $( '.class-for-the-input' );

$checkboxes.on( 'change', function ( evt ) {
    //... code
});

Inside the function handler, you need to get the parent row, find all input elements that are not equals to the checkbox that was clicked, and disable it based on the state of the checkbox:

var $this = $( this ), isChecked = this.checked,
    $els = $this.parents( 'tr' ).find( ':input' ).not( $this );

if ( isChecked ) {
    $els.prop( 'disabled', 'disabled' );
} else {
    $els.removeProp( 'disabled' );
}