JQuery

Question

我有一些动态生成的 table，每个看起来都有点像这样，有一个动态 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>

当用户单击 table 中的任何复选框时，应禁用此 table 中非的所有其他复选框（所以他们只能 select 来自同一项目的子项目）。反之亦然，如果用户取消选中 table 内的所有复选框，所有复选框将再次可用。我试过这样的东西...

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

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

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

Answer 1

当我必须处理 DOM 中设置 and/or 令人不安的元素时，我通常会将特定的 class 分配给活动项目（例如 "active" ).这样，我可以遍历 DOM，取消设置非活动元素，而不用担心当前的 "active" 元素。

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

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

此方法确实需要代码来设置和取消设置 class 中特定元素上的 DOM。比如你给点击的元素添加了一个activeclass，但是没有去掉，这个方法就不行了（因为会有多个active元素）

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

Answer 2

首先找到所有复选框并添加事件处理程序。
然后找到离更改的复选框最近的 table，然后找到 table.

内的所有复选框

现在我们有了这个，我们可以过滤掉当前 table 中的复选框并获取所有其余的，这样我们就可以禁用它们，如果 any 中的复选框当前 table 已检查，我们可以在集合上使用 .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'));
});

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

JQuery - Disable all checkboxes not inside the same table

checkbox