3

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>
Rajesh
  • 24,354
  • 5
  • 48
  • 79
divya
  • 39
  • 1
  • 6

5 Answers5

4

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>
Milan Chheda
  • 8,159
  • 3
  • 20
  • 35
  • this => function is not compatible with internet explorer – divya Nov 23 '17 at 06:36
  • Also, since OP is already using jQuery, we can assume jQuery solution is acceptable. We can even edit question and tag it – Rajesh Nov 23 '17 at 06:37
  • 1
    I have mentioned and given a simple JavaScript solution instead of using JQuery. And that doesn't mean a down-vote. – Milan Chheda Nov 23 '17 at 06:37
  • 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. – Rajesh Nov 23 '17 at 06:38
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

Sanjeev S
  • 1,113
  • 2
  • 13
  • 33
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>
Nisal Edu
  • 7,237
  • 4
  • 28
  • 34
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>
ajithes1
  • 433
  • 2
  • 11
  • 28
0

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>
Rene
  • 976
  • 1
  • 13
  • 25