HTML disabled Attribute
The disabled attribute is a boolean attribute specifying that the element must be disabled. Read about this attribute and see on what elements it can be used.
The HTML disabled attribute is a boolean attribute and specifies that the element must be disabled.
This attribute can be used to prevent using the element until some condition has been met, such as selecting a checkbox. When present, the element does not respond to user actions and cannot be focused. Additionally, disabled form controls are not submitted with the form. It is possible to make the element usable again by removing the disabled attribute with JavaScript. The disabled attribute is commonly grayed out.
You can use the disabled attribute on the following elements: <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, and <textarea>.
When the disabled attribute is applied to an element, the :disabled pseudo-class also applies to it, so you can style disabled controls in CSS. The elements supporting the disabled attribute but not having the attribute set match the :enabled pseudo-class.
Syntax
<tag disabled></tag>Because disabled is a boolean attribute, its mere presence enables it. You don't need a value; disabled, disabled="", and disabled="disabled" are all equivalent. To turn it off, remove the attribute entirely.
disabled vs. readonly
Both attributes stop a user from changing a form control, but they behave very differently. Choosing the wrong one is a common source of bugs, especially when a field's value still needs to reach the server.
| Behavior | disabled | readonly |
|---|---|---|
| Value submitted with the form | No | Yes |
| Can receive keyboard focus | No | Yes |
| Appears editable (cursor, text selection) | No (greyed out) | Yes |
Matches :disabled / :read-only | :disabled | :read-only |
| Announced to screen readers | Often skipped | Announced normally |
| Works on every control type | <input>, <select>, <textarea>, <button>, etc. | only text-like <input> and <textarea> |
Use disabled when the control should be completely inactive and its value should be ignored. Use readonly when you want the user to see (and copy) a value but not edit it, while still submitting it with the form.
Accessibility
A disabled element is removed from the tab order, cannot be clicked, and is often skipped by assistive technologies. That makes it easy to miss: a screen-reader user tabbing through a form may never learn that a disabled "Submit" button exists, or why.
If you want a control to look and act as unavailable but still be focusable and announced, use the aria-disabled="true" attribute instead of the native disabled attribute. With aria-disabled, the control stays in the tab order and is announced as "dimmed/unavailable," but you must prevent its action yourself in JavaScript — the browser will not block clicks or form submission for you.
As a rule of thumb: use native disabled for controls that truly should not participate, and reach for aria-disabled when keeping the element discoverable matters more than the built-in protection.
Examples by element
Example of the HTML disabled attribute used on the <button> element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type="button">Button</button> <br /><br />
<button type="button" disabled>Disabled button</button>
</body>
</html>Example of the HTML disabled attribute used on the <fieldset> element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 22px;
}
</style>
</head>
<body>
<form>
<fieldset disabled>
<legend>Personal Information:</legend>
<div>
<label>First Name:</label>
<input type="text" />
</div>
<div>
<label>Last Name:</label>
<input type="text" />
</div>
<div>
<label>Date of birth:</label>
<input type="text" />
</div>
</fieldset>
</form>
</body>
</html>When a <fieldset> is disabled, all descendant form controls are also disabled except for the form controls within the <legend> element.
Example of the HTML disabled attribute used on the <input> element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="#" method="get">
<input type="text" name="name" placeholder="Enter your name" />
<input type="number" name="Date of birth:" placeholder="Date of birth:" disabled/>
<input type="submit" value="Submit" />
</form>
</body>
</html>Example of the HTML disabled attribute used on the <optgroup> element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup label="Books" disabled>
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="java">Java</option>
<option value="linux">Linux</option>
<option value="git">Git</option>
</optgroup>
</select>
</body>
</html>Example of the HTML disabled attribute used on the <option> element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="computers">Computer</option>
<option value="notebook">Notebook</option>
<option value="tablet" disabled>Tablet</option>
</select>
</form>
</body>
</html>Example of the HTML disabled attribute used on the <select> element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select disabled>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Example of the HTML disabled attribute used on the <textarea> element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<textarea name="comment" rows="8" cols="50" disabled>Send your comments to the author.</textarea>
</form>
</body>
</html>Toggling disabled with JavaScript
A common pattern is to keep a control disabled until the user does something — for example, only enabling a "Submit" button after a checkbox is ticked. In JavaScript, every form control exposes a boolean disabled property. Set it to true to disable the element and false to enable it:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label>
<input type="checkbox" id="agree" /> I accept the terms
</label>
<br /><br />
<button id="submit" type="button" disabled>Submit</button>
<script>
const agree = document.getElementById("agree");
const submit = document.getElementById("submit");
agree.addEventListener("change", function () {
// Enable the button only while the checkbox is checked
submit.disabled = !agree.checked;
});
</script>
</body>
</html>Setting element.disabled = true adds the attribute, and element.disabled = false removes it. Note that the property is a boolean, not the string "disabled", so always assign true or false.