Question

我想在选中相应的chkView时启用该行的编辑和删除复选框，如果未选中则禁用它们。首先，这段代码根本没有触发。我哪里错了。

HTML

<table id="table_forms">
    <tr>
        <td><input type="checkbox" class="chkView"/>View</td>
        <td><input type="checkbox" class="chkEdit" disabled/>Edit</td>
        <td><input type="checkbox" class="chkDelete" disabled/>Delete</td>
    </tr>
   <tr>
        <td><input type="checkbox" class="chkView"/>View</td>
        <td><input type="checkbox" class="chkEdit" disabled/>Edit</td>
        <td><input type="checkbox" class="chkDelete" disabled/>Delete</td>
    </tr>
</table>

JS：

$(document).on('change','.chkView',function(){
var row = $(this).closest('tr');
    if($(this).prop("checked",true))
    {
        $(row).find('.chkEdit').prop("disabled",false);
        $(row).find('.chkDelete').prop("disabled",false);
    }
    else
        {
        $(row).find('.chkEdit').prop("disabled",true);
        $(row).find('.chkDelete').prop("disabled",true);
    }

});

Answer 1

$(document).on('change','.chkView',function(){
var row = $(this).closest('tr');
    if($(this).is(':checked'))
    {           
      $(row).find('.chkEdit,.chkDelete').prop("disabled",false);    
    }
    else
    {
      $(row).find('.chkEdit,.chkDelete').prop("disabled",true);     
    }
});

您在选择器类中缺少＆＃39;。＆＃39; 。

演示：

http://jsfiddle.net/J6TN8/2/

Answer 2

试试这个：

$(document).on('change', '.chkView', function() {
    $(this).closest('tr').find('.chkEdit, .chkDelete').prop('disabled', !this.checked);
});

演示：http://jsfiddle.net/75rVH/3/

另外为了保持一致性，如果某些.chkView加载已经检查过，您需要确保触发更改事件以使相应的编辑和删除行为正常$('.chkView:checked').change();（ demo）。

Answer 3

这是一个很老的问题，但是为了体现最佳实践，我添加了这个。

这应该将事件处理程序尽可能地靠近复选框元素，以避免遍历整个DOM。既然我们有一个ID，那将是最快的，并且由于它必须是唯一的，因此我们可以保证它是确定的。

它还应该仅定位“复选框”输入类型为[type=checkbox]的元素，以防止将类添加到其他HTML（例如td，tr）的情况甚至是表格范围之外的某些元素。

为了完整起见，您还可以考虑“取消选中”禁用的元素-例如，根据使用情况，我希望这通常是您发布的表单中所需的操作，因此我添加了它。

$('#table_forms').on('change', '.chkView[type=checkbox]', function(event) {
  // added to enable the uncheck on disable when they are checked
  let viewCheck = $(this);
  let isViewChecked = !!viewCheck.prop('checked');
  let isViewDisbled = !!viewCheck.prop('disabled');
  let rowChecks = viewCheck
    .closest('tr')
    .find('.chkEdit[type=checkbox], .chkDelete[type=checkbox]');

  // force view to unchecked if it is checked and disabled (optional depends on requirement, might not ever happen)
  viewCheck.filter(':checked').prop('checked', !isViewDisbled);
  // show if View is checked
  rowChecks.prop('disabled', isViewDisbled || (!isViewChecked && !isViewDisbled));
  // turn off checked if it is on and View is disabled 
  rowChecks.filter(function(index, checkbox) {
      return isViewDisbled || (!isViewChecked && $(checkbox).is(':checked'));
    })
    .prop('checked', false);

  // turn off checked if it is on and View is disabled
  rowChecks.filter(function(index, checkbox) {
    return isViewDisbled && $(checkbox).is(':checked');
  }).prop('checked', false);

}).find('.chkView[type=checkbox]').filter(function(index, element) {
  return !!$(element).siblings('input[type=checkbox]');
}).trigger('change'); // setup initial if they are disabled

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table id="table_forms">
  <tr>
    <td><input type="checkbox" class="chkView" checked disabled />View</td>
    <td><input type="checkbox" class="chkEdit" checked disabled/>Edit</td>
    <td><input type="checkbox" class="chkDelete" disabled/>Delete</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="chkView" />View</td>
    <td><input type="checkbox" class="chkEdit" disabled/>Edit</td>
    <td><input type="checkbox" class="chkDelete" disabled/>Delete</td>
  </tr>
</table>

在表行中启用“禁用控件”

3 个答案:

演示：http://jsfiddle.net/75rVH/3/