Jquery如何禁用提交按钮，直到选中单选按钮和复选框

Question

I have a submit button which is disabled by default. Now I have two radio buttons and a checkbox and the submit button is only allowed to be enabled when one of the radio buttons has been checked AND the checkbox has been checked.

Right now, I can simply check the checkbox and the submit button is enabled.

<div>
  <label for="check1">
     <input type="radio" name="radio" id="check1">Value 1
  </label>

  <label for="check2">
     <input type="radio" name="radio" id="check2">Value 2
  </label>
</div>

<div id="terms">
   <input type="checkbox" name="test" value="1">Check
 </div>

<div>
  <button type="submit" id="btn">Send</button>
</div>

and the JS:

$('button[type="submit"]').prop("disabled", true);

$('input[name="test"]').on("click", function() {
  $(' button[type="submit"]').prop("disabled", !$('input[name="test"]').prop("checked"));
});

I made an jsfiddle for it.

So, how can I achieve that?

Answer 1

You can check the length of checked radio button:

 $('button[type="submit"]').prop("disabled", true); $('input[name="test"], input[name="radio"]').on("click", function() { if($('input[name="radio"]:checked').length){ $(' button[type="submit"]').prop("disabled", !$('input[name="test"]').prop("checked")); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <label for="check1"> <input type="radio" name="radio" id="check1">Value 1 </label> <label for="check2"> <input type="radio" name="radio" id="check2">Value 2 </label> </div> <div id="terms"> <input type="checkbox" name="test" value="1">Check </div> <div> <button type="submit" id="btn">Send</button> </div>

Answer 2

Create one common function to validate all checkboxes and radio button.

Check below sample.

 $('button[type="submit"]').prop("disabled", true); $('#check1, #check2, input[name="test"]').on("change", function() { validate(); }); function validate() { var valid = true; if(!$('[name="radio"]:checked').val()) { valid = false; } if(!$('[name="test"]').prop('checked')) { valid = false; } $('button[type="submit"]').prop("disabled", !valid) }

 #terms { margin-top: 15px; } #btn { margin-top: 15px; background: red; padding: 5px; border: 0; } #btn::disabled { background: lightgrey; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <label for="check1"> <input type="radio" name="radio" id="check1" value="1">Value 1 </label> <label for="check2"> <input type="radio" name="radio" id="check2" value="2">Value 2 </label> </div> <div id="terms"> <input type="checkbox" name="test" value="1">Check </div> <div> <button type="submit" id="btn">Send</button> </div>

Answer 3

Add an onclick on both of them, and and if statement inside :

 $('button[type="submit"]').prop("disabled", true); $('input[name="test"], input[name=radio]').on("click", function() { if ($('input[name=radio]:checked').length > 0) { $('button[type="submit"]').prop( "disabled", !$('input[name="test"]').prop("checked") ); } });

 #terms { margin-top: 15px; } #btn { margin-top: 15px; background: red; padding: 5px; border: 0; } #btn::disabled { background: lightgrey; }

 <div> <label for="check1"> <input type="radio" name="radio" id="check1">Value 1 </label> <label for="check2"> <input type="radio" name="radio" id="check2">Value 2 </label> </div> <div id="terms"> <input type="checkbox" name="test" value="1">Check </div> <div> <button type="submit" id="btn">Send</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

https://jsfiddle.net/wxq0Lr5n/