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

【问题标题】：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：感谢您的提示。但是还是不行。

标签： javascript jquery validation checkbox submit

【解决方案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>

【讨论】：