I have an HTML page with several checkboxes and one disabled button.

Now, as soon as one or more of the checkboxes are checked, the button must enable.

Also, when all the checkboxes are unchecked, the button must go to disabled-state again.

The test case seems to be:

If a checkbox is checked, then the button should enable (this I can get to work).

If another checkbox is checked, the button remains enabled (this also works).

If the first checkbox is unchecked, the button must also stay enabled, because the 2nd checkbox is still checked.

This last part is that I can't get to work.

The checkboxes are dynamical, so I can't define them beforehand. There might be two, or ten.

This is why I tried a for loop.

I can't get this to work, what I have so far:

var x = document.getElementsByName("cb");

for (var i = 0; i < x.length; i++) {
    if(x[i].checked == true){
	    document.getElementById('Button1').disabled = false;
    }
} 

<div class="container">
   <input type="button disabled" name="Button1" class="inputButton" id="Button1" value=" Send " disabled="disabled" />
</div>
<div>
   <input type="checkbox"  onchange="document.getElementById('Button1').disabled = !this.checked;" />
   <input type="checkbox"  onchange="document.getElementById('Button1').disabled = !this.checked;" />
</div>

I have an HTML page with several checkboxes and one disabled button.

Now, as soon as one or more of the checkboxes are checked, the button must enable.

Also, when all the checkboxes are unchecked, the button must go to disabled-state again.

The test case seems to be:

If a checkbox is checked, then the button should enable (this I can get to work).

If another checkbox is checked, the button remains enabled (this also works).

If the first checkbox is unchecked, the button must also stay enabled, because the 2nd checkbox is still checked.

This last part is that I can't get to work.

The checkboxes are dynamical, so I can't define them beforehand. There might be two, or ten.

This is why I tried a for loop.

I can't get this to work, what I have so far:

var x = document.getElementsByName("cb");

for (var i = 0; i < x.length; i++) {
    if(x[i].checked == true){
	    document.getElementById('Button1').disabled = false;
    }
} 

<div class="container">
   <input type="button disabled" name="Button1" class="inputButton" id="Button1" value=" Send " disabled="disabled" />
</div>
<div>
   <input type="checkbox"  onchange="document.getElementById('Button1').disabled = !this.checked;" />
   <input type="checkbox"  onchange="document.getElementById('Button1').disabled = !this.checked;" />
</div>

Both with the HTML and onchange event and the Javascript I can't get it to work.

The two are not used at the same time.

EDIT: Got it to work: The answer by Takit Isy works fine!

• javascript
• html
• button
• checkbox

Share Improve this question Follow edited May 3, 2018 at 14:06 CMorgan asked May 3, 2018 at 9:09 CMorganCMorgan 69322 gold badges1414 silver badges4343 bronze badges 1

• You should create a function doCheck() that is responsive for checking checkbox's status and update the status of button. At each of checkbox element, you listen to onchange even to call doCheck. – Dong Nguyen Commented May 3, 2018 at 9:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I suggest you to do that kind of things:
(See ments in my code)

var cbs = document.querySelectorAll('input[type="checkbox"]');
var but = document.getElementById('Button1');

function update() {
  but.disabled = true; // Disabled by default
  cbs.forEach(function(entry) {
    if (entry.checked) {
      but.disabled = false; // Enable button
      return false; // Exit the loop
    }
  });
}

cbs.forEach(function(entry) {
  entry.onchange = update; // Bind update() function on change of each checkboxes
});

<div class="container">
  <input type="submit" name="Button1" class="inputButton" id="Button1" value=" Send " disabled />
</div>
<div>
  <input type="checkbox" />
  <input type="checkbox" />
</div>

Hope it helps.

function onChange(e) {
    var checkedInputs = document.querySelectorAll('input[type="checkbox"]:checked');
    if (checkedInputs.length > 0) {
        document.getElementById('Button1').disabled = false;
    } else {
        document.getElementById('Button1').disabled = true;
    }
}

document.querySelectorAll('input[type="checkbox"]').forEach(function(val, key) {
    val.addEventListener("change", onChange);
})

<div class="container">
   <input type="button disabled" name="Button1" class="inputButton" id="Button1" value=" Send " disabled="disabled" />
</div>
<div>
   <input type="checkbox" />
   <input type="checkbox" />
</div>