HTML与JavaScript复选框级联启用/禁用问题求助

需求说明 #

• 当ac_0未勾选时，ac_1、ac_2、ac_3需禁用并取消勾选；ac_4未勾选时，ac_5、ac_6、ac_7需禁用并取消勾选；ac_8未勾选时，ac_9、ac_10、ac_11、ac_12需禁用并取消勾选。
• 当ac_1未勾选时，ac_2、ac_3需禁用并取消勾选；ac_5未勾选时，ac_6、ac_7需禁用并取消勾选；ac_9未勾选时，ac_10、ac_11需禁用并取消勾选。
• ac_2、ac_3需在ac_0和ac_1都勾选时才能启用；ac_6、ac_7需在ac_4和ac_5都勾选时才能启用；ac_10、ac_11需在ac_8和ac_9都勾选时才能启用。
• 支持从数据库加载初始化状态，便于后续添加新复选框组。

当前问题 #

取消勾选ac_0、ac_4、ac_8时功能正常，但勾选它们时会错误启用所有对应下级复选框（例如勾选ac_0时，ac_2、ac_3在ac_1未勾选的情况下也被启用）。重新操作ac_1等次级复选框后恢复正常，但再次操作顶级复选框时问题重现。

问题根源 #

原代码采用简单的"主复选框直接控制子复选框"逻辑，未考虑多级依赖的叠加条件。当顶级复选框勾选时，直接启用所有下级（包括需要次级复选框同时勾选才能启用的项），忽略了需求中的多条件限制。

修复后的代码 #

修正后的HTML（修复语法错误） #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Access Control Form</title>
    <meta charset="UTF-8" />
</head>
<body>
    <form action="" method="post" name="FormName">
        <div>
            <label>Name:</label>
            <div class='mb-3'>
                <input type="text" value="Form Name Here" name="name" maxlength="75" />
            </div>
        </div>
        <div>
            <label>Group1:</label>
            <div>
                <div><input type="checkbox" id="ac_0" name="ac_0" /> - 0</div>
                <div><input type="checkbox" id="ac_1" name="ac_1" /> - 1</div>
                <div><input type="checkbox" id="ac_2" name="ac_2" /> - 2</div>
                <div><input type="checkbox" id="ac_3" name="ac_3" /> - 3</div>
            </div>
        </div>
        <div>
            <label>Group2:</label>
            <div>
                <div><input type="checkbox" id="ac_4" name="ac_4" /> - 4</div>
                <div><input type="checkbox" id="ac_5" name="ac_5" /> - 5</div>
                <div><input type="checkbox" id="ac_6" name="ac_6" /> - 6</div>
                <div><input type="checkbox" id="ac_7" name="ac_7" /> - 7</div>
            </div>
        </div>
        <div>
            <label>Group3:</label>
            <div>
                <div><input type="checkbox" id="ac_8" name="ac_8" /> - 8</div>
                <div><input type="checkbox" id="ac_9" name="ac_9" /> - 9</div>
                <div><input type="checkbox" id="ac_10" name="ac_10" /> - 10</div>
                <div><input type="checkbox" id="ac_11" name="ac_11" /> - 11</div>
                <div><input type="checkbox" id="ac_12" name="ac_12" /> - 12</div>
            </div>
        </div>
        <div>
            <label>Group4:</label>
            <div>
                <input type="checkbox" id="ac_13" name="ac_13" /> - 13
            </div>
        </div>
        <div>
            <label>Group5:</label>
            <div>
                <input type="checkbox" id="ac_14" name="ac_14" /> - 14
            </div>
        </div>
        <div>
            <label>Group6:</label>
            <div>
                <input type="checkbox" id="ac_15" name="ac_15" /> - 15
            </div>
        </div>
        <div>
            <label>Group7:</label>
            <div>
                <div><input type="checkbox" id="ac_16" name="ac_16" /> - 16</div>
                <div><input type="checkbox" id="ac_17" name="ac_17" /> - 17</div>
                <div><input type="checkbox" id="ac_18" name="ac_18" /> - 18</div>
            </div>
        </div>
        <div>
            <div>
                <input type="submit" name="submit" value="Edit Access Right" />
            </div>
            <div>
                <input type="submit" name="reset" value="Reset Form" />
            </div>
        </div>
    </form>
    <script>
        window.onload = function() {
            // 定义每个复选框的依赖条件：key为复选框ID，value为需要全部勾选的依赖项ID数组
            const dependencies = {
                'ac_1': ['ac_0'],
                'ac_2': ['ac_0', 'ac_1'],
                'ac_3': ['ac_0', 'ac_1'],
                'ac_5': ['ac_4'],
                'ac_6': ['ac_4', 'ac_5'],
                'ac_7': ['ac_4', 'ac_5'],
                'ac_9': ['ac_8'],
                'ac_10': ['ac_8', 'ac_9'],
                'ac_11': ['ac_8', 'ac_9'],
                'ac_12': ['ac_8']
            };

            // 获取所有需要控制的复选框ID
            const controlledCheckboxes = Object.keys(dependencies);

            // 更新单个复选框的状态
            function updateCheckboxState(checkboxId) {
                const checkbox = document.getElementById(checkboxId);
                const required = dependencies[checkboxId];
                // 检查所有依赖项是否都已勾选
                const allRequiredChecked = required.every(id => document.getElementById(id).checked);
                
                if (!allRequiredChecked) {
                    checkbox.disabled = true;
                    checkbox.checked = false;
                } else {
                    checkbox.disabled = false;
                }
            }

            // 更新所有受控复选框的状态
            function updateAllCheckboxStates() {
                controlledCheckboxes.forEach(updateCheckboxState);
            }

            // 为所有可能影响其他复选框的复选框添加事件监听
            [...new Set([...controlledCheckboxes, ...Object.values(dependencies).flat()])].forEach(id => {
                const checkbox = document.getElementById(id);
                checkbox.addEventListener('change', updateAllCheckboxStates);
            });

            // 初始化状态（支持从数据库加载的默认值）
            updateAllCheckboxStates();
        };
    </script>
</body>
</html>

修复思路 #

1. 明确依赖关系：用对象定义每个复选框的启用条件，每个复选框对应一个需要全部勾选的依赖项数组，后续添加新复选框只需扩展此对象即可。
2. 全局状态更新：当任何复选框状态变化时，重新计算所有受控复选框的启用/禁用状态，确保所有多级依赖条件都被满足。
3. 初始化兼容：页面加载时自动执行一次状态更新，支持从数据库加载的初始勾选状态（只需在HTML中为对应复选框添加checked属性即可）。
4. 错误修正：修复原HTML中的语法错误（如<div"">），避免潜在渲染问题。

内容的提问来源于stack exchange，提问作者Simon Joseph