How to disable an HTML button element

You can disable the <button> element in HTML by adding the disabled attribute to the element.

The disabled attribute is a boolean attribute that allows you to disable an element, making the element unusable from the browser.

You just need to add the disabled attribute without any value as shown below:

<button disabled>Click me</button>

Because the disabled attribute is a boolean attribute, you don’t need to assign any value to it.

When you need to enable the <button> later, you need to fetch the element using JavaScript and change the disabled property to false.

First, let’s add an id attribute to the <button> element above so you can select the element using JavaScript:

<button id="disabled" disabled>Click me</button>

Now you can enable the button by using the document.getElementById() method as follows:

document.getElementById("disabled").disabled = false;

You can also disable the button programmatically by setting the disabled attribute to true:

document.getElementById("disabled").disabled = true;

Once you have disabled a button, you can only enable it again by using JavaScript.