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

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>

This is the jQuery code we will need:

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

$(document).on('click', '#disable-button', disableButton);

See the Pen on CodePen.

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>

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);

See the Pen on CodePen.

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() === '';
});
};

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:

See the Pen on CodePen.

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>

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);
});

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);

Here's an example:

See the Pen on CodePen.

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");
}

See the Pen on CodePen.

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;

Then you would also need to change the respective event listeners if you use any.

Here's an example of how to disable the button after click using JavaScript:

See the Pen on CodePen.

References