How to Enable or Disable a Button using Jquery

Normally, people will press a submit button more than a time to make sure the button is surely clicked. While do so, it will results and cause submission issue and sometimes shows error. To overcome this problem, the only solution is to disables the submit button after user clicked it.

Using jQuery has many features, where it allows you to enable and disable the buttons. By the way, today we will show you how to quickly enable or disable the submit button using jQuery.

We are going to discuss three types to disable or enable a butting in front end.

Disabled button using HTML

<h1>Disable button before Rendering using html attribute</h1>
<h4>method 1</h4>
<button type="button" class="" title="Close" disabled="true">Disabled before rendered</button>
<h4>method 2</h4>
<button type="button" class="" title="Close" disabled>Disabled before rendered</button>

This will help you to disable the button before rendering. Its very simple approach to get started.

Disable or Enable Button using jquery

To do so, you have to add a disabled attribute to the submit button, as follows:$(“#buttonSubmit”).attr(“disabled”, true);

Enable disable button jquery

HTML Coding:

<h1>on Click Disable button using prop & Attr (jquery)</h1>
	<h4>method 1</h4>
	<button type="button" class="onclickdisable" title="Close">On click Disable via prop</button>
	<h4>method 2</h4>
	<button type="button" class="onclickdisable2" title="Close">On click Disable via attr</button>

Jquery Coding:

<script>
    $(document).ready(function () {

       $(".onclickdisable").click(function() {
	     $(this).prop('disabled', true);
	});

       $(".onclickdisable2").click(function() {
             $(this).attr('disabled', true);
	});
    });
</script>

 

To Enable Button

For this, either you can disabled attribute to false or remove the disabled attribute. Therefore, there are two ways to enable a disabled button. Let’s see how to enable it in 2 methods.$(‘#buttonSubmit’).attr(“disabled”, false);          

or

$(‘#buttonSubmit’).removeAttr(“disabled”);

Disabled by Default while Loading

Another example for default disabled. On page load, you can set the button be disabled by default. Once the user fills the form, it will enable automatically.// To Disable Submit Button By Default

$(“input[type=submit]”).attr(‘disabled’,’disabled’);

// When User Fills Out Form Completely

$(“form”).keyup(function(){

$(“input[type=submit]”).removeAttr(‘disabled’);

});

Also, disable submit button on its first click.$(“input[type=submit]”).click(function(){

$(“input[type=submit]”).attr(‘disabled’,’disabled’);

});

jQuery File for Disable/Enable

<script>$(document).ready(function() {
$("#submit").attr('disabled', 'disabled');
$("form").keyup(function() {
// To Disable Submit Button
$("#submit").attr('disabled', 'disabled');
// Validating Fields
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var filter = /^[w-.+][email protected][a-zA-Z0-9.-]+.[a-zA-z0-9]{2,4}$/;
if (!(name == "" || email == "" || message == "")) {
if (filter.test(email)) {
// To Enable Submit Button
$("#submit").removeAttr('disabled');
$("#submit").css({
"cursor": "pointer",
"box-shadow": "1px 0px 6px #333"
});
}
}
});
// On Click Of Submit Button
$("#submit").click(function() {
$("#submit").css({
"cursor": "default",
"box-shadow": "none"
});
alert("Form Submitted Successfully..!!");
});
});

JavaScript

Spread the love

Leave a Comment