Jquery如何禁用提交按鈕，直到選中單選按鈕和復選框

Question

我有一個默認禁用的提交按鈕。 現在我有兩個單選按鈕和一個復選框，並且只有在選中其中一個單選按鈕並且選中了復選框時才允許啟用提交按鈕。

現在，我可以簡單地選中復選框並啟用提交按鈕。

<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>

和JS：

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

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

我為它制作了一個jsfiddle 。

那么，我怎樣才能做到這一點？

Answer 1

您可以檢查選中單選按鈕的長度：

 $('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

創建一個通用函數來驗證所有復選框和單選按鈕。

檢查以下示例。

 $('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

在它們兩個上添加一個 onclick，並在里面添加 if 語句：

 $('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/