如何用纯JavaScript实现未勾选左侧表格复选框时禁用右侧表格复选框

问题排查 #

• 方法名拼写错误：DOM方法是getElementsByTagName（复数，末尾带s），你写的单数形式是不存在的，该方法返回的是所有匹配元素的集合，而非单个元素，不能直接对集合设置disabled属性
• 逻辑不完整：现有代码只要触发变更就放开右侧勾选，但未处理「左侧所有勾选都被取消」的场景，此时应该重新禁用右侧所有复选框
• 未遍历元素：右侧表格有多个复选框，需要遍历集合给每个元素单独设置disabled状态

可行实现方案 #

直接替换你原有func1的代码即可，不需要修改JSP结构和已绑定的事件：

function func1() {
    // 判断左侧是否有至少一个被勾选的复选框
    const hasLeftChecked = document.querySelectorAll('input[name="p_div"]:checked').length > 0;
    // 获取右侧所有复选框
    const rightCheckboxes = document.querySelectorAll('#tab2 input[name="p_roll"]');
    // 遍历批量设置状态
    rightCheckboxes.forEach(item => {
        item.disabled = !hasLeftChecked;
        // 可选补充：左侧全取消时自动清空右侧已勾选的内容
        if(!hasLeftChecked) item.checked = false;
    })
}

该实现自动适配左侧勾选状态：初始状态左侧无勾选、右侧默认禁用，左侧至少勾选一个时自动放开右侧权限，左侧所有勾选取消时自动禁用右侧。

内容的提问来源于stack exchange，提问作者Amit K Kushwaha