Disable a HTML Button in JavaScript [With Examples]

Alvaro Trigo

Updated on: July 16, 2024

To disable a button using only JavaScript you need to set the disabled property to true. For example: element.disabled = true.

And to enable a button, you need do the opposite by setting the disabled JavaScript property to false.

Here is a more complete example where we select the button and then change its disabled property:

// Disabling a button using JavaScript
document.querySelector('#button').disabled = true;
Code language: JavaScript (javascript)

// Enabling a disabled button
document.querySelector('#button').disabled = false;
Code language: JavaScript (javascript)

These are the steps we have to follow:

Select the button element you want to disable.
Set the disabled property to false.

The disabled property reflects the HTML attribute disabled and provide a way to change this property dynamically with JavaScript.

Disable Button JS Example

For demo purposes and to keep it as simple as possible, we’ll be disabling the button when clicking on itself:

const button = document.querySelector('#button');

const disableButton = () => {
    button.disabled = true;
};

button.addEventListener('click', disableButton);
Code language: JavaScript (javascript)

Here’s the Codepen so you can test it out yourself and play a bit more with it by changing the code:

If you are using jQuery, check out our article on how to disable a button using jQuery. The process is pretty similar.

Disable Button Changing the “disabled” HTML Attribute

Because the disabled property is also available on the DOM, and you can change the state of a button by changing the HTML attribute.

This is how a disabled button would look on HTML markup:

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

So, to change the HTML attribute disabled you have to use the property setAttribute, then use removeAttribute to re-enable the button.

// Disabling a button using setAttribute
button.setAttribute("disabled", "");

// Re-enabling a disabled button by removing the "disabled" property
button.removeAttribute("disabled");Code language: JavaScript (javascript)