JQuery - 禁用不在同一个表内的所有复选框答案

【问题标题】：JQuery - Disable all checkboxes not inside the same tableJQuery - 禁用不在同一个表内的所有复选框
【发布时间】：2015-04-23 05:43:47
【问题描述】：

我有一些动态生成的表，每个看起来都像这样，带有一个动态 ID

<table class="innerDatTable" id="dynamically-generated'>
    <caption><h2>Project #</h2></caption>
    <thead>
        <tr>
            <th></th>
            <th>SubProject Name</th>
            <th>Date Completed</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td><span>SubProjectName</span></td>
            <td><span>Date</span></td>
        </tr>
    </tbody>
</table>

当用户点击表格中的任何复选框时，应该禁用该表格中非的所有其他复选框（因此他们只能从同一项目中选择子项目）。反之亦然，如果用户取消选中表格中的所有框，则所有复选框再次变为可用。我尝试过这样的事情......

if ($('table input:checked').length > 0) {
    checked = $(this).prop('checked');
    ($('table input[type=checkbox]').attr('id').not($(this).attr('id')))
    .prop('disabled', checked);
}

这里的逻辑是，如果在表格中选中了任何复选框，则禁用所有其他与该表格不具有相同 ID 的复选框（同样，事先不知道 ID）。我主要遵循question 中的答案并尝试根据我的需要进行更改，但我无法获得预期的效果（或任何效果，就此而言）。

我是否需要将所有其他表 ID 放入一个数组中，并在循环中禁用它们中的每一个？有人可以在语法或更好的逻辑方面指出我正确的方向吗？

【问题讨论】：

禁用输入并不会取消选中它，只是让您知道。

标签： jquery checkbox

【解决方案1】：

首先找到所有复选框并添加一个事件处理程序。
然后找到最接近更改复选框的表，然后找到该表中的所有复选框。

现在我们有了这个，我们可以过滤掉当前表中的复选框并获取所有其余的，这样如果当前表中的 any 复选框被选中，我们就可以禁用它们，我们可以检查在集合中有.is(':checked')。

var boxes = $('table input[type="checkbox"]')

boxes.on('change', function() {
    var table  = $(this).closest('table'),
        inputs = table.find('input[type="checkbox"]');

    boxes.not( inputs ).prop('disabled', inputs.is(':checked'));
});

【讨论】：

【解决方案2】：

当我必须处理 DOM 中的设置和/或取消设置元素时，我通常会为活动项（例如“活动”）分配一个特定的类。这样，我可以遍历 DOM，取消设置非活动元素，而不用担心当前的“活动”元素。

换句话说，你想做一些类似（伪代码）的事情：

$("parent element").find("checkbox elements").not(".active").setInactive()

此方法确实需要代码在 DOM 中的特定元素上设置和未设置类。例如，如果你给一个被点击的元素添加了一个活动类，但不移除它，这个方法就不起作用（因为会有多个活动元素）。

当然，您还需要确保使用正确的函数来取消设置非活动复选框。 This SO 问题应该会引导您朝着正确的方向前进...

【讨论】：