如何根据子项选择状态正确启用/禁用父级区块？

我仔细看了你的代码，问题出在判断父级是否该启用的逻辑上——你现在用整个ids数组的长度来判断，但这个数组里可能混着其他父级的子项ID或者父级自己的ID，根本没法准确反映当前父级的所有子项是否都未被选中。

举个例子：如果你选了A父级的两个子项，然后取消其中一个，ids数组长度还是1（还有另一个子项），这时候父级应该保持禁用；但如果是选了A父级的一个子项和B父级的一个子项，然后取消A的子项，ids数组长度还是1（B的子项），这时候A父级其实应该启用，但你的代码会因为数组长度>0继续禁用A父级，这就是问题所在。

具体修改步骤 #

1. 修正子按钮点击事件中的父级状态判断逻辑

在创建子按钮的循环里，不要用ids.length > 0，而是专门检查当前父级的所有子项是否有任何一个在选中数组里。

首先在父级子项循环前，先存下当前父级的子项ID列表（解决闭包变量问题）：

// 在遍历父级子项前，先保存当前父级的子项ID列表
const currentChildIds = parent.children;

然后把原来的父级状态判断代码替换成：

// 检查当前父级的子项中是否有被选中的
const hasSelectedChild = currentChildIds.some(childId => ids.includes(childId));
if (hasSelectedChild) {
    $(`#${parentId}`).addClass('disabled');
} else {
    $(`#${parentId}`).removeClass('disabled');
}

2. 补充父级按钮点击后的状态检查

当父级按钮被取消选中时，需要重新检查子项的选中状态，确保父级的禁用状态正确：

在父级按钮的click事件中，修改取消选中的分支：

if (index > -1) {
    ids.splice(index, 1);  
    $(this).removeClass("changedBackground");  
    // Enable the child sections when the parent is unselected
    parent.children.forEach(function(childId) {
        $(`#${childId}`).removeClass('disabled'); 
    });
    // 新增：检查子项是否有被选中的，更新父级禁用状态
    const hasSelectedChild = parent.children.some(childId => ids.includes(childId));
    if (hasSelectedChild) {
        $(this).addClass('disabled');
    } else {
        $(this).removeClass('disabled');
    }
} else {
    ids.push(parentId); 
    $(this).addClass("changedBackground"); 
    // Disable the child sections when the parent is selected
    parent.children.forEach(function(childId) {
        $(`#${childId}`).addClass('disabled'); 
    });
    // 父级选中时，确保自己是可点击的，移除禁用类
    $(this).removeClass('disabled');
}

为什么这样改？ #

• currentChildIds.some(childId => ids.includes(childId))会精准判断当前父级下有没有子项被选中，完全不受其他父级的选中状态影响。
• 父级取消选中时重新检查子项状态，避免出现父级已经取消选中，但子项还有选中的情况，导致父级状态错误。
• 父级选中时强制移除禁用类，确保父级自己的可点击状态正常。

这样修改后，父级就会严格按照“所有子项都未被选中时启用，只要有一个子项选中就禁用”的逻辑工作了。

备注：内容来源于stack exchange，提问作者sps