Question

我有以下代码：

<table>
 <tr class="name"><td><input type="hidden" value="name1" name="name"></td><td><input type="checkbox"></td></tr>
 <tr class="name"><td><input type="hidden" value="name2" name="name"></td><td><input type="checkbox"></td></tr>
</table>

我尝试过：

$('.name').find("input[type='checkbox']").change(function(){
        var check = $(this).attr('checked');
        $(this).find(input[type='hidden']).attr('disable',!check )
      })

我想在选中checkbox时禁用输入type="hidden，但是我的代码无法正常工作！

Answer 1

为'change'事件附加处理程序，查找最接近的父行，并根据是否选中复选框来启用/禁用禁用的属性。

$('input[type="checkbox"]').on('change', function() {
    var $this = $(this);
    var $row = $this.closest('tr');
    $row.find('input[type="hidden"]').prop('disabled', this.checked);
});

~~旁注：问题不包含任何代码来显示您尝试过的内容，并且您可以看到答案非常简单。~~

~~还没有测试过，您可能需要将.prop切换为.attr。~~
JSFiddle，代码由Nathan Champion jsfiddle.net/3qg6Ljev

提供

如果您需要在行中添加更多输入，则需要向隐藏的输入中添加一个应与复选框配合使用的类，并改用.find('input.class')。

Answer 2

所以您的HTML就像;

<table>
   <tr class="name">
      <td><input type="hidden" value="name1" name="name"></td>
      <td><input type="checkbox"></td>
   </tr>
   <tr class="name">
      <td><input type="hidden" value="name2" name="name"></td>
      <td><input type="checkbox"></td>
   </tr>
</table>

现在使用JS：

$(document).on('change', "[type='checkbox']", function() {
     var isDisabled = $(this).closest('td').siblings().find('input').prop('disabled');
     $(this).closest('td').siblings().find('input').prop('disabled', !isDisabled);
});

检查同级后如何禁用输入？

2 个答案: