jQuery

jQuery Disable Button Example

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>
Disabling a Button as an Initial State
Disabling a Button as an Initial State

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.

Disabling a Button on Click
Disabling a Button on Click

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>
Disabling a Button after Form Submission
Disabling a Button after Form Submission

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

Download
You can download the full source code of this example here: jQuery Disable Button Example

Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button