Disable every non checked checkbox

Question

I have a bunch of forms with a checkbox in each of them and when a condition is met i want to disable every checkbox that is NOT checked.

I've tried doing this but with no luck

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

I would preferably only use vanilla javascript.

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — evolutionxbox, Jan 12 '21 at 21:05

score 6 · Answer 1 · answered Jan 12 '21 at 21:06

querySelectorAll returns a NodeList object, you have to use that object to iterate through the elements and disable them.

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

imvain2 · Answer 2 · 2021-01-12T21:17:31.953

2

You will need to loop through the results of querySelectorAll.

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

edited Jan 12 '21 at 21:17

answered Jan 12 '21 at 21:04

imvain2

15,480
1
16
21

b3lg1c4 · Answer 3 · 2021-01-12T22:16:01.507

2

You can first use a class for all those inputs what are checkboxes. And then use checked property:

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

edited Jan 12 '21 at 22:16

answered Jan 12 '21 at 21:06

b3lg1c4

76
1
4

Doesn't appear OP actually uses a class called `checkbox` – GetSet Jan 12 '21 at 21:14
In the case he uses that class it would be an easy solution i think. – b3lg1c4 Jan 12 '21 at 21:16
Would require more existing code changes, but I understand your logic. – GetSet Jan 12 '21 at 21:17
Yes you are right, it would be a big change in the code mmm...i didnt think about it. – b3lg1c4 Jan 12 '21 at 21:18
Your solution is more elegant (and flexible) so I will upvote. By "flexible" I mean suppose in the future only certain checkboxes should be included in the disabling and not all that are unchecked. – GetSet Jan 12 '21 at 21:22
I really appreciate it. – b3lg1c4 Jan 12 '21 at 21:24

score 2 · Accepted Answer · answered Jan 12 '21 at 21:15

You can use something like this:

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

Edit: I was too slow. Already suggested by @Gunther: https://stackoverflow.com/a/65692054/4261813

Disable every non checked checkbox

4 Answers4