enable submit button once checkbox is checked

Question

I try to figure out how to enable a submit button and change it's color once a checkbox has been checked. Here's my code:

//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');

});

Here's my fiddle:

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

Answer 1

You can simplify the code to:

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

So if #agree is checked, call addClass('enabled') and set prop('disabled', false), else removeClass('enabled') and set prop('disabled', true).

You also need to change your CSS so that if #agree has the enabled class, it has precedence over the id selector:

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

Fiddle

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

Answer 3

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

});

AND HTML WILL BE

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

you can update to this:

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

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

Fiddle

Answer 6

Js code

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

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

.enabled{
   background-color: #CC2EFA !important; 
}

HTML Code

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