Enable/Disable Form Submit Button with jQuery

If you are creating a HTML form, especially jQuery Ajax driven form, you might want to disable the submit button while page goes into loading mode, because you don’t want user to resubmit same content and cause script failure. To prevent this from happening, we need to disable submit button, here’s how.

jQuery 1.6 or above

If you are using jQuery 1.6 or above you can use jQuery prop() to disable a button.

//where #submit_button is id of your form submit button
$("#submit_button").prop( "disabled", true);

$("#submit_button").click(function () {
	$(this).prop( "disabled", true);
	//$(this).prop( "disabled", false); //to enable button just set 2nd parameter false
});

Below jQuery 1.6

If you are still using jQuery 1.5, you can try another jQuery method called .attr()

$("#submit_button").attr("disabled", "disabled");

$("#submit_button").click(function () {
	$(this).attr("disabled", "disabled");
	//$(this).removeAttr("disabled");//enable button again
});