Question

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

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

Answer 1

<强> 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; 
}

Answer 2

检查这个小提琴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');
});

Answer 3

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");
      }                             
  });

});

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

Answer 4

你可以更新到：

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

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

Fiddle

Answer 5

您可以将代码简化为：

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

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

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

6 个答案:

Fiddle

Fiddle