HTML <button> disabled Attribute

Last Updated : 11 Mar, 2024

The HTML <button> disabled attribute prevents user interaction with the button, making it unclickable and visually indicating its disabled state. It’s typically used to indicate that a button is inactive or unavailable for interaction.

Syntax:

<button disabled></button>

HTML Button Disabled Attribute Example

Example: This example display implementation of button disabled attribute.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML button disabled Attribute</title>
</head>
 
<body style="text-align:center">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>HTML button disabled Attribute</h2>
 
    <!-- A disabled button -->
    <button type="button" disabled>I am disabled!</button>
</body>
 
</html>

Output:

button

Explanation:

In this example we features a disabled button element created using the <button> tag with the text “I am disabled!”.
The button is disabled using the disabled attribute, preventing user interaction.
The styling ensures the content is centered on the page using inline CSS for text alignment and color.

HTML button disabled Attribute Use Cases

1. How to specify that a button should be disabled using HTML5?

To specify a button as disabled in HTML5, add the disabled attribute to the <button> tag, like this: <button type=”button” disabled>.

2. How to disable button element dynamically using JavaScript ?

To disable a button dynamically using JavaScript, target the button element and set its disabled property to true, like this: buttonElement.disabled = true;.

3. Which attribute is used to disabled the specific input field in HTML Form ?

The disabled attribute is used to disable a specific input field in an HTML form. It’s applied directly to the input element, like this: <input type=”text” disabled>.

4. How to enable/disable a button using jQuery ?

To enable/disable a button using jQuery, select the button element and use the prop() method to set its disabled property to true or false, like this: `$(‘#myButton’).prop(‘disabled’, true/false);.

5. How to remove “disabled” attribute from HTML input element using JavaScript ?

To remove the “disabled” attribute from an HTML input element using JavaScript, target the element and use the removeAttribute() method, like this: inputElement.removeAttribute(‘disabled’);.

Supported Browsers

The browser supported by <button> disabled attribute are listed below:

Suggest improvement

HTML | kind Attribute

CSS outline-width Property

Share your thoughts in the comments