JQuery -禁用不在同一表中的所有复选框

Question

我有一些动态生成的表，每个表看起来都有点像这样，具有一个动态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中的答案，并试图根据我的需要修改它，但我无法获得所期望的效果(或任何效果，在这个问题上)。

是否需要将所有其他表in放在数组中，并在循环中禁用每个表in？有人能在语法方面给我指明正确的方向吗，或者更好的逻辑？

Answer 1

首先查找所有复选框并添加一个事件处理程序。

然后查找最接近已更改复选框的表，然后查找该表中的所有复选框。

现在，我们可以过滤掉当前表中的复选框，并获取所有其他复选框，以便在选中当前表中的任何复选框时禁用这些复选框，并且可以在集合中使用.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'));
});

Answer 2

当我必须处理DOM中的设置和/或不稳定元素时，我通常会将一个特定的类分配给活动项(例如" active ")。这样，我就可以迭代DOM，取消非活动元素，而不用担心当前的“活动”元素。

换句话说，您可能希望执行类似于(伪代码)的操作：

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

此方法确实需要代码来在DOM中的特定元素上设置和未设置类。例如，如果将活动类添加到单击元素，但不删除它，则此方法将无法工作(因为将有多个活动元素)。

当然，您还需要确保使用适当的函数来取消非活动复选框。This所以问题应该会引导你走向正确的方向.