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

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

在这种情况下，您可以使用.closest().siblings().find().prop() 方法。另一个建议是使用群组收音机：

$(".chkbox").on('change', function() {
    $(this).closest("td").siblings("td").find(":checkbox").prop("disabled", this.checked);
});

这里this.checked 返回布尔值。如果选中 true 并且未选中则 false。

---

在我看来，问题在于您编写代码的方式告诉将点击事件绑定到当前单击的复选框。

---

    $(".chkbox").on('change', function() {
        $(this).closest("td").siblings("td").find(":checkbox").prop("disabled", this.checked);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</table>

Answer 2

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

工作演示：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')
}
})

Answer 3

这应该可行：

$(".chkbox").click(function(){
    var currentObj = $(this);
    $(this)
        .closest("tr")
        .find(".chkbox").attr("disabled","disabled");
    $(currentObj).removeAttr("disabled");
});

fiddle