Question

在this回答了问题后，我试图在表格的每一行末尾添加一个复选框，每行包含2个文本字段输入。

如果选中复选框，我希望输入变为“禁用”。

我的HTML：

<table class="forecast">
    <tr>
      <th>Question</th>
      <th>Answer A</th>
      <th>Answer B</th>
      <th>Not applicable</th>
    </tr>
    <tr>
      <td>Quesiton 1</td>   
      <td>
        <input id="" name="q1a" value="" size="10" maxlength="10" />
      </td>
      <td>
        <input class="" title="" id="" name="q1b" value="" size="10" maxlength="10" />
      </td>
      <td >
        <input type="checkbox" id="" class="notused" name="" />
      </td>
    </tr>
    <tr>
      <td>Quesiton 2</td>   
      <td>
        <input id="" name="q2a" value="" size="10" maxlength="10" />
      </td>
      <td>
        <input class="" title="" id="" name="q2b" value="" size="10" maxlength="10" />
      </td>
      <td >
        <input type="checkbox" id="" class="notused" name="" />
      </td>
    </tr>
</table>

我尝试过的jQuery：

$('.notused').delegate(':checkbox', 'change', function() {
    $(this).closest('tr').find('input:text').attr('disabled', this.checked);
});
$(':checkbox').change();

当我选中此框时没有任何反应，我的控制台中没有错误。任何帮助将不胜感激，谢谢。

Answer 1

您需要使用.prop()来设置checked属性，还需要.on()来注册事件处理程序

$('.forecast').on('change', ':checkbox', function () {
    var $inpts = $(this).closest('tr').find('input:text').prop('disabled', this.checked);
    if(this.checked){
        $inpts.val(0)
    }
}).find(':checkbox').change();

（假设您使用的是jQuery＆gt; = 1.7）

演示：Fiddle

Answer 2

尝试使用Jquery 1.9.1

$(function(){
$('.forecast').delegate(':checkbox', 'change', function() {
    $(this).closest('tr').find('input:text').attr('disabled', this.checked);
});
});

Demo

Updated Demo with 0 value

使用复选框禁用表行中的所有输入字段

2 个答案: