jQuery Disable Button - Disabling and Enabling Buttons with jQuery

jQuery Disable Button – Disabling and Enabling Buttons with jQuery

Today in this tutorial we will learn jQuery Disable Button.Using jQuery to disable a button has many advantages as it will allow you to enable and disable the button based on user interaction. You will easily be able to use this code with other jQuery implementations. Let’s get started.

Starting out we are going to create a very basic HTML form that will have an input and a button, this simple form will pretend to be a search form, but will not work as part of this tutorial.

The idea is that we don’t want the user to be able to press the search button until they have entered some text into the search input box.

jQuery Disable Button - Disabling and Enabling Buttons with jQuery

jQuery Disable Button – Disabling and Enabling Buttons with jQuery

THE HTML FORM for jQuery Disable Button


Now we have a basic HTML form and some CSS to work from, let’s move onto the jQuery.


Before we do anything we include the jQuery library into our page so we are able to, well… use jQuery. We do this by simply adding the following line into the header of the page.

The first thing we need to do is catch the user interaction event, there are many events to choose from but for this purpose I believe that the best event to choose will be keyup. This means that we can trigger a set of code to run every time the users presses and releases a key within the searchInput text box.


Firstly we are wrapping all our code into:

This will tell the browser to execute any code within when the page loads. We then attach the keyup event to the search input we created by using the following code.

Now we have attached the event to our input, we can go ahead and add some code to achieve our desired result. For the code to be executed when the users key has been pressed and then released we need to wrap the code within a function and put it into the keyup event trigger method.


The above code is commented well to make it as easy as possible to understand, but I will go into more detail here. First, we check to see if the input currently has any text entered.

$(this), because it is wrapped within an event method is referring to the element that the event is attached to, so in this case, in #searchInput element.

It is worth mentioning here why I chose the keyup event as opposed to, say the keydown event. If we had attached the keydown event then when we check for any input we would be checking just before some input is about to be entered, as its on key down. Where with keyup we are checking after any input has been entered or removed. (for example they used back space). This will become apparent when we can see it in action.

Depending on the outcome of the if statement, if the input is equal to nothing then we need to ensure the button is disabled, so we use the following code.

Notice how this is referencing the enableOnInput class as opposed to ID, as its using a . as opposed to a #. An ID would work fine here, but if we wanted to disable multiple form elements in the future, we then only need to apply this class to it for the JavaScript to work on those inputs/buttons too.

What this code is actually doing, is setting the disabled attribute on the HTML element to disabled, so when this code is executed, the HTML button will look like the following:

This will now prevent any action when the user clicks on the button and will also grey out the button to make it visible to the user that it is disabled.

When we check to see if there is any text added to the searchInput element and we find some, we then can set the disabled attribute to false therefore enabling the button, with the following code:

This will literally remove the attribute making the button input look like the following:

This then means that the user will be free to click the submit button and submit the form. There is one last thing we must do before this simple script is complete. When we created our HTML form and created the submit button, we didn’t add the disabled=’disabled’ by default, this means that when the page first loads and a keyup event has never been triggered the button will be enabled. To prevent this we simple add the disabled=’disabled’ to the HTML.

FINAL CODE for jQuery Disable Button:

Below is all the code for the whole implementation, feel free to copy, paste and use as you please.



To enable/disable a button with jQuery you need to use two methods, attr()and removeAttr() as follows:


Thank you for reading this tutorial I hope it has been useful, please let me know your thoughts and any other ways you would use jQuery Disable Button – Disabling and Enabling Buttons with jQuery. Comment and share!

jQuery Disable Button – Disabling and Enabling Buttons with jQuery

Read previous post:
Easy Feedback Form On Page Bottom Using jQuery HTML And CSS
Feedback Form On Page Bottom Using jQuery HTML And CSS

Feedback Form On Page Bottom Using jQuery HTML And CSS   In this tutorial, we will create a Sliding Feedback...