选中复选框后启用提交按钮

Posted 2023-05-09

【中文标题】选中复选框后启用提交按钮

【英文标题】：enable submit button once checkbox is checked

【发布时间】：2014-05-13 11:05:39

【问题描述】：

我试图弄清楚如何启用提交按钮并在选中复选框后更改其颜色。这是我的代码：

//On document load
$(document).ready(function()
  //Set button disabled
  $("input[type=submit]").attr("disabled", "disabled");

  //Append a change event listener
  $('#agree').change(function()
        //Validate your form here, example:
        var validated = true;
        if($('#agree').val().length === 0)
            validated = false;

        //If form is validated enable form
        if(validated)    
            $("input[type=submit]").removeAttr("disabled").addClass("enabled");                             
  );

  //Trigger change function
  $('#submit').trigger('change');

);

这是我的小提琴：

http://jsfiddle.net/trTNL/2/

【问题讨论】：

您没有在该文件中包含 jquery。否则没关系jsfiddle.net/trTNL/8

顺便说一句：为什么你使用input[type=submit] 而不是input #submit 作为选择器？基于 ID 的选择器是最快的。

@alexP：没有明确的原因

@Anoop Joshi：感谢您的提示。但是还是不行。

【参考方案1】：

您可以将代码简化为：

$('#agree').change(function()
    $('#submit')[ this.checked ? 'addClass' : 'removeClass' ]('enabled').prop('disabled', !this.checked); 
);

所以如果#agree被选中，调用addClass('enabled')并设置prop('disabled', false)，否则removeClass('enabled')并设置prop('disabled', true)。

您还需要更改您的 CSS，以便如果 #agree 具有 enabled 类，它优先于 id 选择器：

#submit.enabled 
    background-color: #CC2EFA;
 

Fiddle

【参考方案2】：

FIDDLE DEMO

$(document).ready(function()
      //Set button disabled
      $("input[type=submit]").attr("disabled", "disabled");

      //Append a change event listener to you inputs
      $('#agree').change(function()
            //Validate your form here, example:
            var validated = true;
            if($('#agree').prop("checked")=== false)
                validated = false;
           alert(validated);
            //If form is validated enable form
            if(validated)    
                      $("input[type=submit]").prop("disabled",false).addClass("enabled");                             
      );

      //Trigger change function once to check if the form is validated on page load
      $('#submit').trigger('change');
);

CSS

.enabled
   background-color: CC2EFA !important; 

【参考方案3】：

检查这个小提琴http://jsfiddle.net/trTNL/19/

//On document load
$(document).ready(function()
      //Set button disabled
      $("input[type=submit]").attr("disabled", "disabled");

      //Append a change event listener to you inputs
      $('#agree').change(function()
            //Validate your form here, example:
          var validated =  $(this).is(":checked")

            //If form is validated enable form
            if(validated)    
                $("input[type=submit]").attr("disabled",false).addClass("enabled");
            else
                $("input[type=submit]").attr("disabled",true).removeClass("enabled");
            
      );

  //Trigger change function once to check if the form is validated on page load
  $('#submit').trigger('change');
);

【参考方案4】：

DEMO

//On document load
$(document).ready(function()
  //Set button disabled


  //Append a change event listener to you inputs
  $('#agree').click(function()
        //Validate your form here, example:
        var validated = false;
      if($('#agree').is(':checked'))
            validated = true;
         
        console.log(validated); 
        //If form is validated enable form
        if(validated)    
            $("input[type=submit]").removeAttr("disabled").addClass("enabled");
                                   
  );

);

html 将是

<form name="form" value="" action="" method="POST">
<p>
    <input type="checkbox" name="box" id="agree">
    Please check.
</p>
<p>
    <input type="Submit" value="continue" id="submit" disabled="disbaled">
</p>
</form>

【参考方案5】：

你可以更新到这个：

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

$('#agree').change(function () 
    $("input[type='submit']").prop("disabled", !this.checked).toggleClass('enabled');
);

Fiddle

【讨论】：

如果#agree 已经被选中，而你取消选中它，它将添加启用的类但禁用按钮。另外，!important 只能作为最后的手段使用

【参考方案6】：

JS代码

$(document).ready(function()
          //Set button disabled
          $("input[type=submit]").attr("disabled", "disabled");

          //Append a change event listener to you inputs
          $('#agree').change(function()
                //Validate your form here, example:
                var validated = true;
                if($('#agree').prop("checked")=== false)
                    validated = false;
              $("input[type=submit]").prop("disabled",false).removeClass("enabled");
              $("input[type=submit]").attr("disabled", "disabled");
                //If form is validated enable form
                if(validated)    
                          $("input[type=submit]").prop("disabled",false).addClass("enabled");                             
          );

          //Trigger change function once to check if the form is validated on page load
          $('#submit').trigger('change');
    );

CSS 代码

#submit 
    border: 1px solid #006633;
    background-color: #819FF7;
    color: #ffffff;
    padding:6px;
    margin-top: 10px;

.enabled
   background-color: #CC2EFA !important; 

HTML 代码

<form name="form" value="" action="" method="POST">
    <p>
        <input type="checkbox" name="box" id="agree">
        Please check.
    </p>
    <p>
        <input type="Submit" value="continue" id="submit">
    </p>