如何使用document.querySelectorAll()实现复选框点击后禁用？

你的代码核心问题出在条件判断的运算符上——你用了赋值运算符=而非比较运算符===（或==）。box.checked = true是把true强制赋值给复选框的checked属性，而非判断它是否已被勾选，这会导致逻辑异常，自然无法正确触发禁用操作。

修正后的代码 #

let checkboxes = document.querySelectorAll('.boxes')

checkboxes.forEach(box => {
    box.addEventListener('change', () => {
        // 用===做严格相等判断
        if (box.checked === true) {
            box.disabled = true;
        }
    })
})

简化优化版 #

因为box.checked本身就是布尔值，可直接作为判断条件，无需额外和true比较：

let checkboxes = document.querySelectorAll('.boxes')

checkboxes.forEach(box => {
    box.addEventListener('change', () => {
        if (box.checked) {
            box.disabled = true;
        }
    })
})

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