Button disabled Property
The disabled property sets or returns whether a button is disabled, or not.
A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers.
This property reflects the HTML disabled attribute.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| disabled | Yes | Yes | Yes | Yes | Yes |
Syntax
Return the disabled property:
Set the disabled property:
Property Values
- true — The button is disabled
- false — Default. The button is not disabled
Technical Details
| Return Value: | A Boolean, returns true if the button is disabled, otherwise it returns false |
|---|
More Examples
Example
Find out if a button is disabled or not:
Example
Disable and enable a button:
function disableBtn() <
document.getElementById("myBtn").disabled = true;
>
function enableBtn() <
document.getElementById("myBtn").disabled = false;
>
Related Pages
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
JavaScript code to disable button elements
When you need to disable buttons using JavaScript, you can update the disabled attribute of <button> elements to true .
Every HTML <button> element has the disabled attribute which is set to false by default, even when the <button> doesn’t have a disabled attribute present. You can test this by running the following HTML code:
That’s why when you need to disable or enable a <button> element, all you have to do is change the value of the disabled attribute:
Disabling multiple buttons with JavaScript
The same technique also applies when you want to disable many buttons on your HTML page. First, You need to select the buttons using the document.getElementsByTagName() method:
The getElementsByTagName() method will return a collection of Then, you need to iterate through the buttons and set the disabled attribute of each button to false . You can use the for loop to do so:
Here’s an example of HTML <body> tag that you can run on your browser:
Disable button after click
The last thing you may want to do is to disable the <button> after the user clicked it to prevent double clicks. You just need to wrap the disabling code in a function and pass it to the onclick attribute of your <button> element:
The code above will disable the saveBtn once it has been clicked. Feel free to modify it to suit your requirements.
Get 100 JavaScript Snippets Book for FREE ��
100 JavaScript snippets that you can use in various scenarios
Save 1000+ hours of research and 10x your productivity
report this ad
About
Sebhastian is a site that makes learning programming easy with its step-by-step, beginner-friendly tutorials.
Learn JavaScript and other programming languages with clear examples.
Free Code Snippets Book
Get my FREE code snippets Book to 10x your productivity here
report this ad
How to disable HTML button using JavaScript?
I’ve read that you can disable (make physically unclickable) an HTML button simply by appending disable to its tag, but not as an attribute, as follows:
Since this setting is not an attribute, how can I add this in dynamically via JavaScript to disable a button that was previously enabled?
9 Answers 9
Since this setting is not an attribute
It is an attribute.
Some attributes are defined as boolean, which means you can specify their value and leave everything else out. i.e. Instead of disabled , you include only the bold part. In HTML 4, you should include only the bold part as the full version is marked as a feature with limited support (although that is less true now then when the spec was written).
As of HTML 5, the rules have changed and now you include only the name and not the value. This makes no practical difference because the name and the value are the same.
The DOM property is also called disabled and is a boolean that takes true or false .
Disable a HTML Button in JavaScript [With Examples]
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:
These are the steps we have to follow:
- Select the button element you want to disable.
- 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:
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.