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.
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
innerTextproperty, 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>
➡️ I'm starting to tweet more consistently. If you want to get more tips and resources about web development, developer tips, and my journey as a Full-stack Engineer -> Find me on my Twitter 🐦
Top comments (1)
That's a good shortened proposal! Thanks for that, @lukeshiru! 😄