如果使用 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>

Answer 1

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>

Answer 2

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

Answer 3

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>

Answer 4

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>

Answer 5

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>