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

And to enable a button we would do the opposite by setting the disabled JavaScript property to false.

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

`// Disabling a button using JavaScript document.querySelector('

button').disabled = true;

`Code language: JavaScript (javascript)

`// Enabling a disabled button to enable it again document.querySelector('

button').disabled = false;

`Code language: JavaScript (javascript)

These are the steps we have to follow:

1. Select the button element you want to disable.
2. 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 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.

While creating user interfaces, you may probably want to make them more dynamic and enable or disable a button programmatically.

Before starting, you need to know that all HTML buttons have a property disabled. Thanks to it, you can enable or disable a button.

<button id-"mainButton">I'm an enabled button!</button> <button id-"mainButton" disabled>I'm a disabled button!</button>

This article will manipulate the disabled property using a short JavaScript code.

Disabled button using JavaScript

Let me show you how to do that!

1. Create a button in your HTML

The first step is to create a button in your HTML with an id property. It will allow you to select it later in the tutorial.

<button id="mainButton">Can you click me?</button>

You can also create this button programmatically in JavaScript if you prefer!

2. Select your button using JavaScript

The first step in your code is to select the button you want to update. You can do it using the

<button id="mainButton">Can you click me?</button>

0 function, but we will use the

<button id="mainButton">Can you click me?</button>

1 native function because of its simplicity.

It will allow you to target an HTML element based on its id property.

// Select the button element in your HTML code const button = document.getElementById('mainButton')

As mentioned previously in this article, all HTML buttons have a disabled property that you can use to disable or enable a button. By default, a button’s disabled property is set to

<button id="mainButton">Can you click me?</button>

5. It means that by default, a button is active.

If you want to disable a button using JavaScript, you can switch this value to

<button id="mainButton">Can you click me?</button>

6 once you have created and selected the button (steps 1 and 2).

// Disable a button in JavaScript button.disabled = true // <- Button is disabled

4. Enable button in JavaScript

Now you know how to disable a button, you can enable it by reverting the

<button id="mainButton">Can you click me?</button>

6 value to

<button id="mainButton">Can you click me?</button>

5.

// Enable a button in JavaScript button.disabled = false // <- Button is not disabled

Bonus: How to Disable a Button in JavaScript Based on Condition

Let’s go further and create some code that disables the button only if its text matches a condition.

Here is what you will need to know:

create a button in HTML disable a button in JavaScript write a condition using JavaScript get a button text in JavaScript (you will use the

<button id="mainButton">Can you click me?</button>

9 property, but don’t worry you will see how to use it below!)

To do so, you can come back to step 1, 2, and 3, except that we disable the button only if the button text is “Can you click me?”.

// Select the button element in your HTML code const button = document.getElementById('mainButton') // Disable the selected button in JavaScript based on a condition // If the button text is 'Can you click me?' if (button.innerText === 'Can you click me?') { button.disabled = true }

If you execute this code in your browser, the button should be disabled. Now, let’s change the condition to another text. For example:

// Select the button element in your HTML code const button = document.getElementById('mainButton')

0, refresh your browser, and the button should be enabled.

Full code to enable and disable a button in JS 👇

<html> <head> <title>Enable and Disable a Button in JavaScript</title> </head> <body> <button id="mainButton">Can you click me?</button> <script> // Select the button element in your HTML code const button = document.getElementById('mainButton') // Disable the selected button in JavaScript based on a condition // If the button text is 'Can you click me?' if (button.innerText === 'Can you click me?') { button.disabled = true } // If you want to enable the button using JavaScript // you can switch back the `disabled property to false // button.disabled = false </script> </body> </html> `

Thanks for reading. Let’s connect!

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. Join me on Twitter for more. 🚀🎒