使用 jQuery 有条件地启用按钮答案

【问题标题】：conditionally enable button with jQuery使用 jQuery 有条件地启用按钮
【发布时间】：2017-03-22 13:09:08
【问题描述】：

<div class="error-message"></div>

 <form id="satisfaction" onsubmit="return validateInput()">
  <input type="radio" name="satisfied"  value="yes" required /> Satisfied
 <input type="checkbox" name="donate" /> Donate<br />
<input type="radio"  name="satisfied" value="no" required /> Not satisfied
    <input type="text" name="reason" /> Reason<br />
   <input type="submit" value="Submit" />
  </form>
  <script>

jQuery:

$('input[name="donate"]').attr('disabled', 'true');

$(document).ready(function () {
$('input[name="satisfied"]').click(function(){

  $('input[name="donate"]').removeAttr("disabled");

});});

如何在jQuery中编写代码，如果才能检查“满意”按钮，则允许用户检查“捐赠”按钮？

【问题讨论】：

将您到目前为止尝试过的内容添加到您的问题中！
使用$.prop 而不是$.attr。

标签： jquery html if-statement conditional-statements

【解决方案1】：

你需要做这样的事情

$('input[name="donate"]').attr('disabled', true);

$(document).ready(function() {
  $('input[name="satisfied"]').on('change', function() {
    if ($('input[name="satisfied"]:checked').val() == 'yes')
      $('input[name="donate"]').removeAttr("disabled");
    else
      $('input[name="donate"]').attr('disabled', true);
  });
});

这是小提琴：https://jsfiddle.net/6syhqzf9/

【讨论】：

我认为最好的做法是使用.prop 来启用/禁用输入

【解决方案2】：

从禁用捐赠输入开始

<input type="radio" name="satisfied"  value="yes" required /> Satisfied
<input type="checkbox" name="donate" disabled="disabled"/> Donate<br />
<input type="radio"  name="satisfied" value="no" required /> Not satisfied

使用change 事件，如果用户选择“满意”，您可以启用该框，否则禁用它。

$(document).on('ready', function(){
    $('input[name="satisfied"]').on('change', function(){
        var val = $('input[name="satisfied"]:checked').val(); //either 'yes' or 'no'
        var $donate = $('input[name="donate"]');  //this is the donate input
        if(val == 'yes')
            $donate.prop('disabled', false);
        else
            $donate.prop('disabled', true);
    });
});

【讨论】：