禁用每个未选中的复选框答案

【问题标题】：Disable every non checked checkbox禁用每个未选中的复选框
【发布时间】：2021-04-17 21:04:00
【问题描述】：

我有一堆表格，每个表格都有一个复选框，当满足条件时，我想禁用每个未选中的复选框。

我试过这样做，但没有运气

if (updateShowcasedProducts.length == 12) {                                    
 document.querySelectorAll('input[type="checkbox"]:not(:checked)').disabled = true;
    }

我最好只使用原版 javascript。

【问题讨论】：

这能回答你的问题吗？ What do querySelectorAll and getElementsBy* methods return?

标签： javascript html forms dom input

【解决方案1】：

您需要遍历querySelectorAll 的结果。

if (updateShowcasedProducts.length == 12) {                                    
    els = document.querySelectorAll('input[type="checkbox"]:not(:checked)');
    for (const el of els) {
      el.disabled = true;
    }
}

【讨论】：

【解决方案2】：

querySelectorAll 返回一个 NodeList 对象，您必须使用该对象来遍历元素并禁用它们。

if (updateShowcasedProducts.length == 12) {                                    
    document.querySelectorAll('input[type="checkbox"]:not(:checked)').forEach((element) => {
       element.disabled = true;
    });
}

【讨论】：

【解决方案3】：

您可以首先为所有这些输入使用一个类，即复选框。然后使用checked属性：

let checkBoxes = document.getElementsByClassName("checkbox");
checkBoxes.forEach(checkBox)=>{
    if(!checkBox.checked){
          checkBox.disabled=true;
    };
});

【讨论】：

没有出现OP实际上使用了一个名为checkbox的类
如果他使用该类，我认为这将是一个简单的解决方案。
需要更多现有的代码更改，但我理解你的逻辑。
是的，你是对的，这将是代码中的一个很大的变化嗯……我没想到。
您的解决方案更优雅（和灵活），所以我会赞成。通过“灵活”，我的意思是假设将来只有某些复选框应该包含在禁用中，而不是所有未选中的复选框。

【解决方案4】：

你可以这样使用：

if (updateShowcasedProducts.length == 12) {
    document.querySelectorAll('input[type="checkbox"]').forEach(i => i.disabled = true);
}

编辑：我太慢了。 @Gunther 已经建议：https://stackoverflow.com/a/65692054/4261813

【讨论】：