在最多两个父容器下允许最多 4 个选中的复选框

Posted 2023-05-09

【中文标题】在最多两个父容器下允许最多 4 个选中的复选框

【英文标题】：Allow max 4 checked checkboxes under max two parent containers

【发布时间】：2015-02-10 21:49:41

【问题描述】：

我有一个包含多个 (>10) 订阅容器的表单，每个订阅容器都包含一个或两个复选框。例如。订阅 1（div 容器）包含两个选项（复选框），如果其他订阅容器下的其他复选框未选中或只有一个订阅容器选中了复选框，则可以选中它们。

<div class="subscription1">
    <input type="checkbox" name="a"></input>
    <input type="checkbox" name="b"></input>
</div>
<div class="subscription2">
    <input type="checkbox" name="a"></input>
    <input type="checkbox" name="b"></input>
</div>

选中复选框的总数限制为 4，最多 2 个两个父容器。 (2x2=4)

它应该首先检查复选框更改是否父容器的兄弟姐妹已选中复选框。如果他们已经禁用或隐藏父容器的没有选中复选框的兄弟姐妹（换句话说，仅显示当前选择）。

反之亦然，当更改复选框状态时，如果选中复选框的父级兄弟姐妹的数量为 1 或更少，它应该显示具有未选中复选框的父容器。

Jquery 选择器（乍一看）可能类似于：

$allotherparents = $(this).parent('.parent').siblings()

$notchecked = $allotherparents.filter('input:not(:checked)')

$checked = $allotherparents.filter('input:checked')

然后简而言之，计算长度，评估并进行更改。但是，我不相信这些选择器，因为只有第一个选择器返回长度 > 0。

【参考方案1】：

我认为你需要这样的东西 - http://jsfiddle.net/ug3crxcy/

$allotherparents = $(this).parent('.parent').siblings('.parent');

$notchecked = $allotherparents.filter(function()
    return $(this).find('input:checked').length === 0;
);

$checked = $allotherparents.filter(function()
    return $(this).find('input:checked').length > 0;
);

【讨论】：

更接近。现在它工作得很好，但是当取消选中一个项目时，它不会反转“限制效果”（fadeto，disabled），直到所有复选框都被取消选中。我正在调试这些上述数字，当从另一个订阅父级取消选中时，它不会对未选中的订阅（父级）的数量产生任何影响。它似乎以其他方式工作，例如选中 +1 但取消选中不会 -1。