Enable a button if atleast one checkbox is checked using javascript

Question

How to enable the submit button when I check atleast 1 checkbox?

$("input[name='vehicle']"), submitButt = $("input[name='Submit']");
var checkboxes = $("input[name='vehicle']"),
  submitButtList = $("#Submit");
checkboxes.click(function() {
  submitButt.attr("disabled", !checkboxes.is(":checked"));
  if (!checkboxes.is(":checked")) {
    submitButtList.addClass("disabled");
  } else {
    submitButtList.removeClass("disabled");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car<br>
<input type="submit" value="Submit" disabled>

@divya Please do not update question based on suggestions in comment or any answer — Rajesh Dixit
– Rajesh Dixit, Commented Nov 23, 2017 at 6:35

Milan Chheda · Accepted Answer · 2017-11-23 06:41:59Z

5

Here is a JavaScript solution, since you have tagged Javascript and not Jquery

function callFunction() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);

  document.querySelectorAll('input[type="submit"]')[0].disabled = true;
  if (checkedOne) {
    document.querySelectorAll('input[type="submit"]')[0].disabled = false;
  }
}

<input type="checkbox" name="vehicle" onchange="callFunction()" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" onchange="callFunction()" value="Car"> I have a car<br>
<input type="submit" value="Submit" disabled>

Jquery solution:

Check the length of checked checkboxes and use prop to disable or enable the button.

$("input[name='vehicle']").on('change', function() {
  $("input[type='submit']").prop('disabled', !$("input[name='vehicle']:checked").length);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car<br>
<input type="submit" value="Submit" disabled>

edited Nov 23, 2017 at 6:41

answered Nov 23, 2017 at 6:35

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

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

4 Comments

divya Over a year ago

this => function is not compatible with internet explorer

Rajesh Dixit Over a year ago

Also, since OP is already using jQuery, we can assume jQuery solution is acceptable. We can even edit question and tag it

Milan Chheda Over a year ago

I have mentioned and given a simple JavaScript solution instead of using JQuery. And that doesn't mean a down-vote.

Rajesh Dixit Over a year ago

Downvote is because you were missing explanation. Hence my 1st comment. Also, is there any issue with OP's code that needs fixing? If yes, please specify it.

Sanjeev S · Accepted Answer · 2017-11-23 06:38:03Z

3

give the same id for the check boxes and write javascript codes on the on click event on the check boxes which enables/disables the button if any one is clicked.

by giving the same name enables only one of the two to be selected

answered Nov 23, 2017 at 6:38

Sanjeev S

1,1632 gold badges14 silver badges34 bronze badges

Comments

Nisal Edu · Accepted Answer · 2017-11-23 06:38:20Z

1

Try this might help you

function myFunction() {

  if (document.getElementById('bike').checked || document.getElementById('car').checked) {
   
    document.getElementById("btn").disabled = false;
  } else {

    document.getElementById("btn").disabled = true;
  }

 



}

<input id="bike" type="checkbox" onchange="myFunction()" name="vehicle" value="Bike"> I have a bike<br>
<input id="car" type="checkbox" onchange="myFunction()" name="vehicle" value="Car"> I have a car<br>
<input type="submit" id="btn" value="Submit" disabled>

answered Nov 23, 2017 at 6:38

Nisal Edu

7,6294 gold badges32 silver badges38 bronze badges

Comments

ajithes1 · Accepted Answer · 2017-11-23 06:39:07Z

1

add name to submit button.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car<br>
<input type="submit" value="Submit" name="Submit" disabled>

answered Nov 23, 2017 at 6:39

ajithes1

4272 gold badges11 silver badges29 bronze badges

Comments

Rene · Accepted Answer · 2020-05-13 02:59:22Z

1. Suggestion to improve your code

You have to add the "name" attribute to your in order to run your code as expected:

$("input[name='vehicle']"), submitButt = $("input[name='Submit']");
var checkboxes = $("input[name='vehicle']"),
  submitButtList = $("#Submit");
checkboxes.click(function() {
  submitButt.attr("disabled", !checkboxes.is(":checked"));
  if (!checkboxes.is(":checked")) {
    submitButtList.addClass("disabled");
  } else {
    submitButtList.removeClass("disabled");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car<br>
<input type="submit" name="Submit" value="Submit" disabled>

2. Suggestion to improve Milan Chheda plain javascript code

If you want, you can also use enter link description here First answer with plain javascript in a shorter form:

You can replace:

  document.querySelectorAll('input[type="submit"]')[0].disabled = true;
  if (checkedOne) {
    document.querySelectorAll('input[type="submit"]')[0].disabled = false;
  }

with

    document.querySelectorAll('input[type="submit"]')[0].disabled = !checkedOne;

function callFunction() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);

  document.querySelectorAll('input[type="submit"]')[0].disabled = !checkedOne;
}

<input type="checkbox" name="vehicle" onchange="callFunction()" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" onchange="callFunction()" value="Car"> I have a car<br>
<input type="submit" value="Submit" disabled>

Collectives™ on Stack Overflow

Enable a button if atleast one checkbox is checked using javascript

5 Answers 5

4 Comments

Comments

Comments

Comments

1. Suggestion to improve your code

2. Suggestion to improve Milan Chheda plain javascript code

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

1. Suggestion to improve your code

2. Suggestion to improve Milan Chheda plain javascript code

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related