選中復選框后啟用提交按鈕

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

現場演示

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

演示

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

Answer 4

您可以更新為：

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

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

小提琴

Answer 5

您可以將代碼簡化為：

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

因此，如果#agree被選中，則調用addClass('enabled')並設置prop('disabled', false) ，否則調用#agree removeClass('enabled')並設置prop('disabled', true) 。

您還需要更改CSS，以便如果#agree具有enabled類，則它優先於id選擇器：

#submit.enabled {
    background-color: #CC2EFA;
} 

小提琴

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>