javascript - 禁用表格行中的所有其他复选框

Question

如果选中一个复选框，我想要所有其他复选框。据我所知，代码应该可以工作(没有控制台错误)。我做错了什么？

由于增加了复杂性，同一事件监听器可能会勾选其他复选框；理想情况下，包含任何被选中的复选框的行也应该被禁用。

(".chkbox").on('change', function() {

  var locked = false;
  // var for current row
  var row = $(this).closest('tr').index();

  var $checkboxes = $('#key_table > tbody > tr > td:nth-child(' + (row + 1) + ')').find('[type=checkbox]');

  $(this).on('click', function toggleLock(e) {
    e.preventDefault();

    // Make locked true if it was false, or vice-versa
    locked = !locked;

    // And apply that value to the 'disabled' attribute of the checkboxes
    $checkboxes.attr('disabled', locked);
  });
});

<table border="1">
  <caption>
    <h5>Selection</h5>
  </caption>
  <tr id="9">
    <td>9.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    </td>
  </tr>
  <tr id="10">
    <td>10.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="11">
    <td>11.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

Answer 1

在此演示中，您还可以取消选中，该操作将启用连续的每个复选框

工作演示:http://jsfiddle.net/darxide/vpvaseL0/

$('body').on('change' , 'tr input' , function () {

var count_checked = 0;

$(this).parent().parent().find('input:checked').each(function() {
    count_checked++
})

if(count_checked > 0){
    $(this).parent().parent().find('input').each(function () {
        $(this).prop('disabled' , true)
    })
    $(this).removeAttr('disabled')
} else {
    $(this).parent().parent().find("input").removeAttr('disabled')
}
})