How to disable a button using JavaScript
Find out how to programmatically disable or enable a button using JavaScript
An HTML button is one of the few elements that has its own state. Along with almost all the form controls.
One common thing that’s needed is to disable / enable the button programmatically using JavaScript.
For example you want to only enable the button when a text input element is filled.
Or when a specific checkbox is clicked, like the ones you see to say “I read the terms and conditions”, something that no one actually reads.
Here’s how to do it.
You select the element, using document.querySelector()
or document.getElementById()
:
const button = document.querySelector('button')
If you have multiple buttons you might want to use document.querySelectorAll()
and loop through the results.
Anyway, once you have the element reference, you set its disabled property to true
to disable it:
button.disabled = true
To enable it back again, you set it to false
to enable it again:
button.disabled = false
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X