本文介绍一种可扩展、易维护的 javascript 方案，用于实现多层级复选框依赖控制：上级复选框（如 ac_0）决定下级是否可用，而更深层级（如 ac_1）进一步约束其子项（如 ac_2/ac_3），支持页面加载时自动初始化，并便于后续新增分组。
本文介绍一种可扩展、易维护的 javascript 方案，用于实现多层级复选框依赖控制：上级复选框（如 ac_0）决定下级是否可用，而更深层级（如 ac_1）进一步约束其子项（如 ac_2/ac_3），支持页面加载时自动初始化，并便于后续新增分组。
在构建权限配置表单或向导式多步选择界面时，常需实现“条件性启用”逻辑——并非简单的父子开关，而是链式依赖：某个复选框仅在多个前置条件同时满足时才可操作。例如，ac_2 和 ac_3 必须同时满足 ac_0.checked === true 且 ac_1.checked === true 才能启用；若任一前置项取消勾选，则立即禁用并清空其子项。
原方案中使用统一 updateCheckboxes 函数处理所有分组，但未区分“层级优先级”，导致 ac_0 被勾选时无条件启用 ac_1/ac_2/ac_3，忽略了 ac_1 的状态约束。正确解法是：为每组定义清晰的启用规则，并在每次相关复选框变更时，重新评估整组状态。
以下是一个结构清晰、可复用的实现方案：
✅ 核心逻辑说明
- 每个功能组（Group1–Group3）对应一个独立的更新函数（如 updateGroup1()）；
- 函数内按层级顺序判断：先检查顶级主控项（ac_0），再检查次级主控项（ac_1），最后设置子项（ac_2, ac_3）的 disabled 与 checked 状态；
- 所有相关复选框均绑定同一更新函数（如 ac_0–ac_3 共享 updateGroup1），确保任意一项变化都触发完整重评估；
- 页面加载后立即调用各组更新函数，保证服务端回填数据（如数据库持久化状态）生效。
? 示例代码（精简可维护版）
<script>
window.onload = function() {
// 获取 DOM 元素（按组组织，提升可读性）
const group1 = {
master0: document.getElementById("ac_0"),
master1: document.getElementById("ac_1"),
child2: document.getElementById("ac_2"),
child3: document.getElementById("ac_3")
};
const group2 = {
master4: document.getElementById("ac_4"),
master5: document.getElementById("ac_5"),
child6: document.getElementById("ac_6"),
child7: document.getElementById("ac_7")
};
const group3 = {
master8: document.getElementById("ac_8"),
master9: document.getElementById("ac_9"),
child10: document.getElementById("ac_10"),
child11: document.getElementById("ac_11"),
child12: document.getElementById("ac_12")
};
// Group1 更新逻辑：ac_2/ac_3 同时依赖 ac_0 AND ac_1
function updateGroup1() {
const { master0, master1, child2, child3 } = group1;
const canEnableChildren = master0.checked && master1.checked;
[child2, child3].forEach(cb => {
cb.disabled = !canEnableChildren;
if (!canEnableChildren) cb.checked = false;
});
}
// Group2：ac_6/ac_7 依赖 ac_4 AND ac_5
function updateGroup2() {
const { master4, master5, child6, child7 } = group2;
const canEnableChildren = master4.checked && master5.checked;
[child6, child7].forEach(cb => {
cb.disabled = !canEnableChildren;
if (!canEnableChildren) cb.checked = false;
});
}
// Group3：ac_10/ac_11 依赖 ac_8 AND ac_9；ac_12 仅依赖 ac_8（独立规则）
function updateGroup3() {
const { master8, master9, child10, child11, child12 } = group3;
// ac_10/ac_11：双依赖
const canEnable1011 = master8.checked && master9.checked;
[child10, child11].forEach(cb => {
cb.disabled = !canEnable1011;
if (!canEnable1011) cb.checked = false;
});
// ac_12：仅受 ac_8 控制（可按需扩展）
child12.disabled = !master8.checked;
if (!master8.checked) child12.checked = false;
}
// 绑定事件监听（每个组内所有相关 checkbox 均触发对应更新）
[group1.master0, group1.master1, group1.child2, group1.child3].forEach(el =>
el?.addEventListener('change', updateGroup1)
);
[group2.master4, group2.master5, group2.child6, group2.child7].forEach(el =>
el?.addEventListener('change', updateGroup2)
);
[group3.master8, group3.master9, group3.child10, group3.child11, group3.child12].forEach(el =>
el?.addEventListener('change', updateGroup3)
);
// 页面加载时初始化各组状态（关键！确保服务端预设值生效）
updateGroup1();
updateGroup2();
updateGroup3();
};
</script>⚠️ 注意事项与最佳实践
- 避免重复绑定：确保 addEventListener 不被多次调用（如不在循环中重复绑定同一元素）；
- 服务端状态兼容：HTML 中应保留 checked 属性（如 <input id="ac_0" checked>），window.onload 中的初始化调用会据此正确设置初始禁用状态；
- 可扩展性设计：新增分组时，只需定义新对象（如 group4）、编写对应 updateGroup4() 函数，并注册事件监听与初始化调用，无需修改现有逻辑；
- 无障碍友好：禁用的复选框会自然失去焦点与交互能力，符合 WCAG 标准；建议配合 <label> 正确关联，提升可访问性；
- 性能考虑：当前每组仅操作 3–5 个元素，无需防抖；若未来分组极大，可将 forEach 替换为直接赋值提升效率。
该方案以明确的职责分离和声明式逻辑替代了原始的“扁平化分组数组+通用函数”，既解决了多级依赖失效问题，又为长期维护和迭代预留了清晰路径。
