Disable and Enable submit button in jquery
This is answered in the jQuery FAQ
How do I disable/enable a form element?
There are two ways to disable/enable form elements.
Set the 'disabled' attribute to true or false:
// Disable #x
$('#x').attr('disabled', true);
// Enable #x
$('#x').attr('disabled', false);
Add or remove the 'disabled' attribute:
// Disable #x
$("#x").attr('disabled', 'disabled');
// Enable #x
$("#x").removeAttr('disabled');
Update: Now the way to do it (as said by FAQ) is only:
// Disable #x
$( "#x" ).prop( "disabled", true );
// Enable #x
$( "#x" ).prop( "disabled", false );
Use .prop()
method and use the $(this)
to reference the target element within the callback function
jQuery(function($) {
const $register = $("#register"),
$loading = $("#loading");
$register.on("click", function() {
$(this).prop('disabled', true);
$loading.show();
setTimeout(function() {
$register.prop('disabled', false);
$loading.hide();
}, 2000);
});
});
<input id="register" value="Register" type="submit">
<div id="loading" style="display:none;">Wait 2 sec...</div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>