The aim of this example is to show you how to enable/disable a button using the famous jQuery library of Javascript.
This is a pretty simple task but very useful on certain cases like when you want to submit a form and disable the button that did so, or just because a button is part of a conditional statement and it should be disabled if one of the conditions is true/false. Let’s have a further look into it.
1. Basic Setup
To start fresh, just create a new HTML document with its basic syntax inside and link your jQuery file inside like so:
<!DOCTYPE html> <html> <head> <title>Basic Example</title> </head> <body> <!-- STYLE SECTION --> <style type="text/css"> </style> <!-- HTML SECTION --> <!-- JAVASCRIPT SECTION --> <script src="jquery-1.11.3.min.js"></script> <script type="text/javascript"> </script> </body> </html>
In order to continue with jQuery, let’s first add a new button in HTML like so:
<!-- HTML SECTION --> <button>Send Details</button>
2. Disabling a Button with jQuery
There are several cases and ways you can and want to disable a button, so here are the most important ones!
2.1 Disabled as an Initial State of the Button
There might be cases you want to set a button as disabled by default since the opening of the page. With jQuery, you can do that using the .attr method.
<!-- JAVASCRIPT SECTION -->
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ /*execute code after the page has been loaded*/
/*reference the button and change its disabled attribute to 'disabled'*/
$('button').attr('disabled', 'disabled');
});
</script>
2.2 Disabling a Button on Click
What if you want to disable a button as soon as it is clicked by the user. Well, you can do that by adding a function which will be executed on any click on the button.
<script type="text/javascript">
$(document).ready(function(){
// reference a button and execute a 'function' when it is clicked
$('button').click(function(){
// reference 'this' (button), and change the disabled attribute to 'disabled'
$(this).attr('disabled', 'disabled');
})
});
</script>
Now clicking on that button will disable it.
2.3 Disabling a Button after Form Submission
A useful case when it would be obvious to disable a button is when a form submission button is clicked. First, add some lines to create a form in HTML:
<form>
<input type="text" placeholder="Name">
<input type="text" placeholder="Age">
<button>Send Details</button>
</form>
To disable the button on form submission, first we reference the form and use the .submit event listener to execute a function we define:
<script type="text/javascript">
$(document).ready(function(){
// reference the form element and watch for 'form' submission event
$('form').submit(function(e){
// prevent the default browser behaviour on this case
e.preventDefault();
// reference 'this' (the form) then find the 'button'
// change its disabled attribute to 'disabled'
$(this).find('button').attr('disabled', 'disabled');
}); });
</script>
In another scenarion, when our button would be represented as an input element of type="submit" like this:
<input type="submit">
disabling it in jQuery would look like this:
// reference children of the 'form' element which have an 'input' with a type of submit
// disable that input using the disabled value of the disabled attribute
$(this).children('input[type=submit]').attr('disabled', 'disabled');The idea is the same, only the way we define the button is changed.
3. Conclusion
Disabling a button is just a normal action to take whenever you need to. With jQuery, this is easy and short in code. However, do remember to reference the right elements/classes when on larger documents and notice to differentiate buttons using classes (therefore, referencing classes) in case you don’t won’t to apply the ‘disabled’ state to all of them.
4. Download
You can download the full source code of this example here: jQuery Disable Button Example
