Javascript 仅使用JS在满足特定条件后禁用复选框

我正在尝试创建一个函数，在选中5个复选框后，该函数将禁用表单中所有剩余的未选中复选框

我能够拉取这些值（使用.length）来验证是否已选中5个复选框，但我无法将disable（）函数正确连接到其余的复选框。如有任何建议，将不胜感激

JS逻辑如下：

    document.addEventListener('DOMContentLoaded', () => {
       let Checkboxes = 
    document.querySelectorAll('input[type="checkbox"]').length <-verifies checkbox total;

    Checkboxes.addEventListener('click', (event)=>{
        event.preventDefault();
        checkboxLimiter();
    });
});

function checkboxLimiter() {
    let markedBoxCount = document.querySelectorAll('input[type="checkbox"]:checked').length; <-verifies "checked" checkbox total;

    if (markedBoxCount == 5){
        disable();
    }
}

function disable() {
    let unmarkedBoxCount = document.querySelectorAll('input[type="checkbox"]:not(:checked)') <-selector for remaining "unchecked" checkboxes;
   ;
    unmarkedBoxCount.disabled = true;

document.addEventListener（'DOMContentLoaded'，（）=>{
让复选框=
document.querySelectorAll（'input[type=“checkbox”]”）。长度{
event.preventDefault（）；
复选框限制器（）；
});
});
函数checkboxlimitor（）{
让markedBoxCount=document.querySelectorAll（'input[type=“checkbox”]：checked'）。length；有两个错误，例如，这将起作用


document.addEventListener（'DOMContentLoaded'，（）=>{
//我们需要获取所有复选框元素，而不是其长度
让复选框=document.querySelectorAll（'input[type=“checkbox”]”）
//复选框是节点列表，所以我们需要添加事件侦听器
//在它的每个元素上，例如
复选框。forEach（复选框=>{
复选框.addEventListener（'单击'，（事件）=>{
复选框限制器（）；
});
});
});
函数checkboxlimitor（）{
让markedBoxCount=document.querySelectorAll（'input[type=“checkbox”]：checked'）。长度；
如果（markedBoxCount==3）{
禁用（）；
}
}
函数禁用（）{
让unmarkedBoxCount=document.querySelectorAll（'input[type=“checkbox”]：not（：checked）'）；
//和复选框一样
unmarkedBoxCount.forEach（复选框=>{
checkbox.disabled=true
})
}
好的，首先要做几件事：

1.）

执行此操作时，将checkbox变量设置为与文档中所有复选框的数组长度相等的数字，而不是数组本身，因此无法在数字上添加eventlistener

(二)

及

您不能一次对整个DOM节点数组执行一个操作，必须对它们进行迭代并添加侦听器或逐个禁用它们

(三)

如果阻止此处的默认操作，则无法选中该复选框

这是工作代码，一个区别是，在您选中其中两个复选框后，我将禁用其余复选框，因为我不想添加更多复选框以保持示例的简单性



文件
战略思维

执行

成就者
建立关系

适应性
影响

活化剂
document.addEventListener（'DOMContentLoaded'，（）=>{
让checkbox=document.querySelectorAll（'input[type=“checkbox”]”）；
for（设i=0；i{
复选框限制器（）；
});
});
函数checkboxlimitor（）{
让markedBoxCount=document.querySelectorAll（'input[type=“checkbox”]：checked'）。长度；
如果（markedBoxCount==2）{
禁用（）；
}
}
函数禁用（）{
让unmarkedBoxCount=document.querySelectorAll（'input[type=“checkbox”]：not（：checked）'）；
for（设i=0；i
您的逻辑有一些错误
试试这个：

let Checkboxes = document.querySelectorAll('input[type="checkbox"]'); 

for(var i = 0; i < Checkboxes.length; i++) {
    Checkboxes[i].addEventListener('change', function() {
        checkboxLimiter(this);
    });
}

function checkboxLimiter(checkbox) {
    let markedBoxCount = 
        document.querySelectorAll('input[type="checkbox"]:checked').length
    if (markedBoxCount > 2){
        checkbox.checked = false;
    };
};

let checkbox=document.querySelectorAll（'input[type=“checkbox”]”）；
对于（变量i=0；i2）{
checkbox.checked=false；
};
};

在本例中，我使用2个复选框禁用复选框

 let Checkboxes = document.querySelectorAll('input[type="checkbox"]').length

    Checkboxes.addEventListener('click', (event)=>{
        event.preventDefault();
        checkboxLimiter();
    });

let unmarkedBoxCount = document.querySelectorAll('input[type="checkbox"]:not(:checked)') ;
unmarkedBoxCount.disabled = true;

    Checkboxes.addEventListener('click', (event)=>{
    event.preventDefault();
    checkboxLimiter();
    });

let Checkboxes = document.querySelectorAll('input[type="checkbox"]'); 

for(var i = 0; i < Checkboxes.length; i++) {
    Checkboxes[i].addEventListener('change', function() {
        checkboxLimiter(this);
    });
}

function checkboxLimiter(checkbox) {
    let markedBoxCount = 
        document.querySelectorAll('input[type="checkbox"]:checked').length
    if (markedBoxCount > 2){
        checkbox.checked = false;
    };
};