How to disable an HTML button element

Learn how to disable an HTML button element

Posted on August 06, 2021

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.

Related articles:

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.