The disabled attribute on a <button> tag disables the button.
The button appears grayed out and is unusable.
A <button> element with a disabled attribute.
The button is unusable.
<button disabled type="button"
onclick="alert('Button was clicked!');">Click Me</button>
Thedisabled attribute specifies that the button is disabled.
The button appears grayed out and is not usable.
Disabled buttons are not included in form submission.
<button disabled>
<button disabled="disabled">
| Value | Description |
|---|---|
| disabled | Use value 'disabled' or no value at all. Both are valid. |
A <button> element that is not disabled.
Clicking the second button toggles the first button's disabled attribute.
<button type="button" id="mybutton"
onclick="alert('Button was clicked!');"
style="border:1px solid teal;">My Button</button>
<br />
<button type="button" onclick="toggle();">Toggle disable</button>
<script>
let toggle = () => {
let element = document.getElementById('mybutton');
let disabled = element.getAttribute("disabled");
if (disabled) {
element.removeAttribute("disabled");
} else {
element.setAttribute("disabled", "disabled");
}
}
</script>
Here is when disabled support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
Back to <button>
