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）。我主要按照Wrapping C++ Member Function Calls by Bjarne Stroustrup中的答案进行操作，并试图根据我的需要改变它，但是我无法达到预期的效果（或任何效果）。

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

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中的设置和/或解决元素时，我通常会将一个特定的类分配给活动项（例如＆＃34; active＆＃34;）。这样，我可以遍历DOM，取消设置非活动元素，而不用担心当前的活动＆＃34;元件。

换句话说，你想做一些像（伪代码）这样的事情：

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

此方法需要代码来设置DOM中特定元素的和未设置类。例如，如果将活动类添加到单击的元素，但不删除它，则此方法将不起作用（因为将有多个活动元素）。

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

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

2 个答案: