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

时间:2013-10-24 16:05:48

标签: javascript php jquery input checkbox

当使用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>   

1 个答案:

答案 0 :(得分:1)

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

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' );
}