Home » Blog » Enable and Disable a Button in JavaScript

Enable and Disable a Button in JavaScript

Learn how to enable and disable a button in JavaScript.

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 querySelector function, but we will use the getElementById 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')

3. Disable button in JavaScript

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 false. It means that by default, a button is active.

If you want to disable a button using JavaScript, you can switch this value to true 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 true value to false.

// 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 innerText 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: button.innerText === "Click here!", 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. 🚀🎒

Gaël Thomas

🚀 Help you grow into Web Development 👨‍💻 Share about my journey as Nomad Software Engineer 🧰 Into JavaScript, TypeScript, Node, and React

Post navigation