本文介绍一种基于父子依赖关系的复选框联动控制方案：上级复选框（如 ac_0、ac_4、ac_8）为“主控开关”，其子级复选框（如 ac_1–ac_3）需满足双重条件才可启用——不仅主控项必须勾选，其直接前驱项也须勾选，从而实现链式权限控制逻辑。
本文介绍一种基于父子依赖关系的复选框联动控制方案：上级复选框（如 ac_0、ac_4、ac_8）为“主控开关”，其子级复选框（如 ac_1–ac_3）需满足**双重条件**才可启用——不仅主控项必须勾选，其直接前驱项也须勾选，从而实现链式权限控制逻辑。
在构建具有层级访问控制语义的表单（例如权限配置系统）时，简单的“父控子”逻辑往往不够——真实业务中常要求 “ac_0 启用 ac_1，ac_1 启用 ac_2/ac_3” 这类链式依赖。这意味着 ac_2 和 ac_3 的可用性取决于两个条件同时成立：ac_0.checked === true 且 ac_1.checked === true；若任一条件不满足，它们必须被禁用并取消勾选。
以下是一个可扩展、易维护、符合 DOM 初始化规范的 JavaScript 实现方案：
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
✅ 核心设计原则
- 声明式分组：将复选框按逻辑组划分（如 Group1: ac_0–ac_3），每组定义主控链路（如 ["ac_0", "ac_1"] → 控制 ["ac_2", "ac_3"]）。
- 状态驱动更新：每次任一相关复选框变更时，统一重算整个组内所有从属项的 disabled 和 checked 状态。
- 页面加载即同步：window.onload 中主动调用初始化函数，确保服务端渲染（如数据库回填）后的初始状态被正确处理。
✅ 推荐实现代码（模块化 & 可扩展）
<script>
window.onload = function() {
// 定义依赖组：每个对象表示一个“启用链”
// chain: 启用所需的前置复选框 ID 数组（顺序即依赖顺序）
// targets: 被控制的复选框 ID 数组
const dependencyGroups = [
{ chain: ['ac_0', 'ac_1'], targets: ['ac_2', 'ac_3'] },
{ chain: ['ac_4', 'ac_5'], targets: ['ac_6', 'ac_7'] },
{ chain: ['ac_8', 'ac_9'], targets: ['ac_10', 'ac_11'] }
];
// 获取所有涉及的复选框元素（缓存提升性能）
const $ = id => document.getElementById(id);
const allIds = [...new Set(
dependencyGroups.flatMap(g => [...g.chain, ...g.targets])
)];
const checkboxes = Object.fromEntries(
allIds.map(id => [id, $(id)])
);
// 更新指定组的目标复选框状态
function updateGroup(group) {
const canEnable = group.chain.every(id => checkboxes[id]?.checked);
group.targets.forEach(id => {
const el = checkboxes[id];
if (!el) return;
el.disabled = !canEnable;
if (!canEnable) el.checked = false; // 强制清除无效勾选
});
}
// 为每个组的所有关联复选框绑定 change 事件
dependencyGroups.forEach(group => {
[...group.chain, ...group.targets].forEach(id => {
const el = checkboxes[id];
if (el) {
el.addEventListener('change', () => {
dependencyGroups.forEach(updateGroup);
});
}
});
});
// 页面加载后立即同步所有组状态（支持服务端预设值）
dependencyGroups.forEach(updateGroup);
};
</script>
✅ 使用说明与注意事项
-
新增分组只需修改 dependencyGroups 数组，无需改动逻辑代码，例如添加 ac_16→ac_17/ac_18：
{ chain: ['ac_16', 'ac_17'], targets: ['ac_18'] } - HTML 中无需额外 class 或 data 属性，完全基于 ID 命名约定，降低模板侵入性。
- 禁用时自动清空勾选：避免用户手动勾选被禁用项导致状态不一致。
- 兼容服务端渲染：window.onload 中的初始化确保数据库返回的 checked="checked" 属性被正确解析并触发联动。
- ⚠️ 重要提醒：所有参与依赖判断的复选框（包括 chain 和 targets）必须存在于 DOM 中且 ID 唯一，否则 getElementById 返回 null 将跳过该元素处理。
此方案摒弃了硬编码函数（如 updateCheckboxes0_3）和重复监听，以数据驱动方式解耦逻辑与配置，兼顾可读性、健壮性与长期可维护性，适用于中大型权限管理表单场景。
