Disable button if all checkboxes are unchecked

Question

I have a list of checkboxes, and I need to disable my submit button if none of them are checked, and enable it as soon as at least one gets checked. I see lots of advice for doing this with just a single checkbox, but I'm hung up on getting it to work with multiple checkboxes. I want to use javascript for this project, even though I know there are a bunch of answers for jquery. Here's what I've got - it works for the first checkbox, but not the second.

HTML:

 <input type="checkbox" id="checkme"/> Option1<br>
 <input type="checkbox" id="checkme"/> Option2<br>
 <input type="checkbox" id="checkme"/> Option3<br>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

Javascript:

 var checker = document.getElementById('checkme');
 var sendbtn = document.getElementById('sendNewSms');
 // when unchecked or checked, run the function
 checker.onchange = function(){
if(this.checked){
    sendbtn.disabled = false;
} else {
    sendbtn.disabled = true;
}

}

you should know that the id is unique, it means that each item have only one id, instead use a class — ctf0
– ctf0, Commented Oct 19, 2016 at 23:31

Luke C · Accepted Answer · 2016-10-20 00:12:42Z

I'd group your inputs in a container and watch that for events using addEventListener. Then loop through the checkboxes, checking their status. Finally set the button to disabled unless our criteria is met.

var checks = document.getElementsByName('checkme');
var checkBoxList = document.getElementById('checkBoxList');
var sendbtn = document.getElementById('sendNewSms');

function allTrue(nodeList) {
  for (var i = 0; i < nodeList.length; i++) {
    if (nodeList[i].checked === false) return false;
  }
  return true;
}

checkBoxList.addEventListener('click', function(event) {
  sendbtn.disabled = true;
  if (allTrue(checks)) sendbtn.disabled = false;
});

<div id="checkBoxList">
  <input type="checkbox" name="checkme"/> Option1<br>
  <input type="checkbox" name="checkme"/> Option2<br>
  <input type="checkbox" name="checkme"/> Option3<br>
</div>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

Fan Jin · Accepted Answer · 2016-10-19 23:44:37Z

0

html

<input type="checkbox" class="checkme"/> Option1<br>
<input type="checkbox" class="checkme"/> Option2<br>
<input type="checkbox" class="checkme"/> Option3<br>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

js

var checkerArr = document.getElementsByClassName('checkme');
var sendbtn = document.getElementById('sendNewSms');
// when unchecked or checked, run the function
for (var i = 0; i < checkerArr.length; i++) {
  checkerArr[i].onchange = function() {
    if(this.checked){
      sendbtn.disabled = false;
    } else {
      sendbtn.disabled = true;
    }
  }
}

answered Oct 19, 2016 at 23:44

Fan Jin

2,46019 silver badges27 bronze badges

Comments

Geeky · Accepted Answer · 2016-10-19 23:59:27Z

I guess this code will help you

window.onload=function(){
var checkboxes = document.getElementsByClassName('checkbox')
 var sendbtn = document.getElementById('sendNewSms');
  var length=checkboxes.length;
  for(var i=0;i<length;i++){
    var box=checkboxes[i];
    var isChecked=box.checked;
    box.onchange=function(){
     sendbtn.disabled=isChecked?true:false;
    }
  }
 // when unchecked or checked, run the function

}

 <input type="checkbox" id="check1" class="checkbox"/> Option1<br>
 <input type="checkbox" id="check2" class="checkbox"/> Option2<br>
 <input type="checkbox" id="check3" class="checkbox"/> Option3<br>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

Few suggestions 1.Always id should be unique. HTML does not show any error, if you give multiple objects with the same id but when you try to get it by document.getelementbyid it always return the first one,because getelementbyid returns a single element

when there is such requirement, you should consider having a classname or searching through the element name because getelementsbyclassname/tag returns an array

Here in the markup i have added an extra class to query using getelementsbyclassname

To avoid adding extra class, you can also consider doing it by document.querySelectorAll

check the following snippet

window.onload=function(){
var checkboxes = document.querySelectorAll('input[type=checkbox]')
 var sendbtn = document.getElementById('sendNewSms');
  var length=checkboxes.length;
  for(var i=0;i<length;i++){
    var box=checkboxes[i];
    var isChecked=box.checked;
    box.onchange=function(){
     sendbtn.disabled=isChecked?true:false;
    }
  }
 // when unchecked or checked, run the function

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="check1" /> Option1<br>
 <input type="checkbox" id="check2" /> Option2<br>
 <input type="checkbox" id="check3" /> Option3<br>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

Hope this helps

Anusha Dharmasena · Accepted Answer · 2016-10-20 00:15:58Z

Something like this would do. I'm sure you can do it with less code, but I am still a JavaScript beginner. :)

HTML

<input type="checkbox" class="checkme" data-id="checkMe1"/> Option1<br>
<input type="checkbox" class="checkme" data-id="checkMe2"/> Option2<br>
<input type="checkbox" class="checkme" data-id="checkMe3"/> Option3<br>

<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

JavaScript

//keep the checkbox states, to reduce access to the DOM
var buttonStatus = {
  checkMe1: false,
  checkMe2: false,
  checkMe1: false
};

//get the handles to the elements
var sendbtn = document.getElementById('sendNewSms');
var checkBoxes = document.querySelectorAll('.checkme');

//add event listeners
for(var i = 0; i < checkBoxes.length; i++) {
    checkBoxes[i].addEventListener('change', function() {
        buttonStatus[this.getAttribute('data-id')] = this.checked;
        updateSendButton();
    });
}

//check if the button needs to be enabled or disabled,
//depending on the state of other checkboxes
function updateSendButton() {
    //check through all the keys in the buttonStatus object
    for (var key in buttonStatus) {
        if (buttonStatus.hasOwnProperty(key)) {
            if (buttonStatus[key] === true) {
                //if at least one of the checkboxes are checked
                //enable the sendbtn
                sendbtn.disabled = false;
                return;
            }
        }
    }
    //disable the sendbtn otherwise
    sendbtn.disabled = true;
}

repzero · Accepted Answer · 2016-10-20 00:20:46Z

0

var check_opt = document.getElementsByClassName('checkit');
console.log(check_opt);
var btn = document.getElementById('sendNewSms');

function detect() {
  btn.disabled = true;
  for (var index = 0; index < check_opt.length; ++index) {
    console.log(index);
    if (check_opt[index].checked == true) {
      console.log(btn);
      btn.disabled = false;
    }
  }
}
window.onload = function() {
  for (var i = 0; i < check_opt.length; i++) {
    check_opt[i].addEventListener('click', detect)
  }
  // when unchecked or checked, run the function
}

<input type="checkbox" id="check1" class="checkit" />Option1
<br>
<input type="checkbox" id="check2" class="checkit" />Option2
<br>
<input type="checkbox" id="check3" class="checkit" />Option3
<br>
<input type="submit" name="sendNewSms" class="inputButton" disabled="true" id="sendNewSms" value=" Send " />

answered Oct 20, 2016 at 0:20

repzero

8,4203 gold badges21 silver badges42 bronze badges

2 Comments

Brian J Graham Over a year ago

So this works in the preview on this page, but it's not working on my page, or in this fiddle [jsfiddle.net/tsLofko3/]

repzero Over a year ago

fiddle link not working.....can you remake the fiddle for me to see whats going on?

Collectives™ on Stack Overflow

Disable button if all checkboxes are unchecked

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related