Disable Submit button until Checkbox is checked

In this tutorial, I'll show you how to Disable Submit button until Checkbox is checked using Jquery.

Click Here for DEMO

First thing, we need HTML to create the form with checkbox and submit button. Here is the code:

HTML
<h2>Disable Submit button until Checkbox is checked</h2>
<form action="#" class="form">
   <fieldset>
      <div class="row">
         <input type="checkbox" id="accept"><label for="accept">I accept the terms and conditions.</label>
      </div>
      <input type="submit" value="Send" id="send" disabled="disabled">
   </fieldset>
</form>

Then, we need CSS to style up the things. Here I use SCSS so I'll share you SCSS code.
SCSS
.form{
   .row{
      margin: 0 0 15px;
   }

   input[type=checkbox]{
      margin: 0 5px 0 0;
   }

   input[type=submit] {
      background: $light-blue;
      color: $white;
      padding: 7px 15px;
      border: 0;

      &:disabled{
         opacity: 0.6;

         &:hover{
            background: $light-blue;
         }
      }

      &:hover{
         background: darken($light-blue, 15%);
      }
   }
}

Finally, we need Jquery Code to disable submit button until checkbox is checked. So, here's the Jquery below.
Jquery
$(function(){
 $('#accept').click(function(){
  if($('#send').is(':disabled')) {
   $('#send').removeAttr('disabled');
  } else {
   $('#send').attr('disabled', 'disabled');
  }
 });
});

I hope this is working well. If you have any thought or any new sharing, feel free to comment below.

Cheers!!

Share this

Related Posts