trigger event if checkbox is checked javascript

Question

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!

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
– Dong Nguyen, Commented May 3, 2018 at 9:20

Takit Isy · Accepted Answer · 2018-05-03 09:53:20Z

4

I suggest you to do that kind of things:
(See comments 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.

edited May 3, 2018 at 9:53

answered May 3, 2018 at 9:47

Takit Isy

10.2k3 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pavan Sikarwar · Accepted Answer · 2018-05-03 09:48:25Z

1

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>

edited May 3, 2018 at 9:48

answered May 3, 2018 at 9:33

Pavan Sikarwar

8086 silver badges14 bronze badges

Collectives™ on Stack Overflow

trigger event if checkbox is checked javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related