动态 javascript，用于检测复选框是否被选中并禁用相应的输入字段 - Dynamic javascript to detect if checkboxes are checked and disable corresponding input fields

Dynamic javascript to detect if checkboxes are checked and disable corresponding input fields

当使用 PHP For 子句动态加载一组输入字段时，我希望每个行都有一个复选框，以便在用户选中它的情况下，该特定行的所有输入字段都将被禁用。

我需要动态调整 javascript，以便每次单击相应的复选框时它都会禁用每个特定行，但我真的不知道如何实现它。

这是我的代码：

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

那么我的javascript如下：

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

首先，您需要添加更改事件侦听器

var $checkboxes = $( '.class-for-the-input' );
$checkboxes.on( 'change', function ( evt ) {
    //... code
});

在函数处理程序中，您需要获取父行，找到所有不等于单击的复选框的输入元素，并根据复选框的状态禁用它：

var $this = $( this ), isChecked = this.checked,
    $els = $this.parents( 'tr' ).find( ':input' ).not( $this );
if ( isChecked ) {
    $els.prop( 'disabled', 'disabled' );
} else {
    $els.removeProp( 'disabled' );
}