Disable button in jQuery [With examples]

Alvaro Trigo

Updated on: February 08, 2024

To disable a button with jQuery you need to set the disabled property on the button using the prop method. For example $('.my-button').prop('disabled', true).

Here’s the step by step process:

Select the button you want to disable.
Use the jQuery prop method.
Set the disabled property to true

The prop method admits two parameters. The first is the property we want to set and the second is the value we want to give to such property. (Or a function that returns a value)

Table of contents:

Disable button on click
Disabling submit button when textarea is empty
Disabling submit button when input is empty
Disable button on page load
Enabling button with jQuery
Checking if the button is disabled or enabled with jQuery
Disable button with JavaScript
References

Disable button on click

So, let’s say we have a button and we want to disable the button when clicking in another button:

<button id="my-button">Save</button>
<button id="disable-button">Disable button</button>
Code language: HTML, XML (xml)

This is the jQuery code we will need:

var disableButton = (e) => {
    $('#my-button').prop('disabled', true);
};

$(document).on('click', '#disable-button', disableButton);
Code language: JavaScript (javascript)

Disabling submit button when textarea is empty

This is a very common scenario that we can find in plenty of web applications or websites. In those cases where it makes no sense to submit a form with an empty textarea, it’s a good practice to disable the submit button when their textarea has no content.

All we have to do is:

Attach the keyup event to our textarea element
Retrieve the value of the textarea
Remove white trailing whitespaces
Disable the submit button when the value is empty.

Let’s say we have the following HTML code with our textarea and our button:

<div>
  <textarea id="my-textarea" rows="5" cols="30"></textarea>
</div>

<button id="my-button" disabled>Save</button>
Code language: HTML, XML (xml)

This would be our jQuery code:

var checkTextarea = (e) => {
  const content = $("#my-textarea").val().trim();
  $('#my-button').prop('disabled', content === '');
};

$(document).on('keyup', '#my-textarea', checkTextarea);
Code language: JavaScript (javascript)

Remember that the second parameter of the prop method also allows us to use a function instead of a boolean?

We can test it out in this same example by replacing our previous code with the following one, where we just return a boolean value on the function we pass as a parameter.


// Example: using a function as the second parameter
// instead of a boolean
var checkTextarea = (e) => {
  $('#my-button').prop('disabled', (e) => {
    return $("#my-textarea").val().trim() === '';
  });
};
Code language: JavaScript (javascript)

Disabling submit button when input is empty

The same exact technique we used for the textarea can be applied for any other input.

I updated the id attribute and the function name but the rest is all the same:

Disable button on page load

The easiest way to show a button as disabled on page load is by directly assigning to it the disabled attribute on the HTML code:

<!-- Enabled button -->
<button id="my-button">Save</button>

<!-- Disabled button -->
<button id="my-button" disabled>Save</button>
Code language: HTML, XML (xml)

However, if for any reason you need to do this dynamically and you have no way to modify the HTML code, you can still do this using jQuery.

It is as simple as disabling it on document ready:

$(document).ready(function () {
    $('#my-button').prop('disabled', true);
});
Code language: JavaScript (javascript)

Enabling button with jQuery

As you’ve probably guessed, enabling a button is as simple as disabling it. In fact, we will be using the exact same prop method. The only difference is that now we’ll set the value for disabled to false instead of true.

// Disables a button
$('#my-button').prop('disabled', true);

// Enables a button
$('#my-button').prop('disabled', false);
Code language: JavaScript (javascript)

Here’s an example:

Checking if the button is disabled or enabled with jQuery

To check the state of a button all we have to do is get the value of the disabled property.

The prop method not only provides us a way to set the properties but also allows us to check their state too. It’s as simple as omitting the second parameter:

// Gets the disabled state of a button
const isDisabled = $('#my-button').prop('disabled');

if( isDisabled ){
    console.log("Is disabled!");
}
else{
    console.log("Is enabled");
}
Code language: JavaScript (javascript)

Disable button with JavaScript

If jQuery is not your thing, you can disable a button with vanilla JavaScript (aka, with just JavaScript).

To disable a button with JavaScript you need to set the disabled property to true by directly setting the value to the property disabled on the DOM element. For example: document.querySelector('#my-button').disabled = true.

So, here’s the equivalence:

// Disabling button using jQuery
$('#my-button').prop('disabled', true);

// Disabling button using JavaScript
document.querySelector('#my-button').disabled = true



// Retrieving disabled state with jQuery
const state = $('#my-button').prop('disabled');

// Retrieving disabled state with JavaScript
const state = document.querySelector('#my-button').disabled;
Code language: JavaScript (javascript)