jQuery tutorial about how to enable or disable submit button by accepting the terms

Hi guys! In this tutorial I will explainn to you how you can enable or disable a submit button by using jQuery. I will explain how to enable or disable submit button by accepting the terms and conditions(by clicking on a checkbox field).

First, I will create a new form with submit button and checkbox field:

<form action="" method="post"><input id="button" disabled="disabled" type="submit" value="Button" />

<input id="accept" type="checkbox" />I accept the terms and conditions</form>

Then, I will write a new jQuery code:

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script><script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script language="javascript">
jQuery(document).ready(function()
{
jQuery("#accept").click(function(){
if(jQuery("#button").is(":enabled"))
{
jQuery("#button").prop("disabled",true);
}
else
{
jQuery("#button").prop("disabled",false);
}
});
}
);
</script>

Now I want to explain to you how it works:

  • When an user click on <input id="accept" type="checkbox" />
  • It will call this function jQuery("#accept").click(function()
  • Next, if(jQuery("#button").is(":enabled")) will verify if submit button is enabled
  • If the submit button is enabled, it will be disabled and if it is disabled, it will be enabled.

I have created also a video tutorial where you can see how it works:









Leave a Comment