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
  • 22,581
  • 5
  • 41
  • 70
divya
  • 39
  • 1
  • 6

5 Answers5

3

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,009
  • 3
  • 19
  • 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,033
  • 1
  • 13
  • 32
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
  • 6,289
  • 4
  • 25
  • 33
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>
unknown123
  • 404
  • 2
  • 10
  • 26
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
  • 619
  • 1
  • 8
  • 22