Skip to main content

How to Set the disabled Attribute in JavaScript

Disabling an element, such as a <button> or <input>, is a fundamental part of managing user interactions in a web form. A disabled element cannot be clicked, focused, or submitted, providing a clear visual cue that it is not currently active. The correct and most reliable way to control this state in JavaScript is by setting the boolean disabled property on the DOM element.

This guide will teach you the right way to use the .disabled property, explain the common pitfall of using setAttribute(), and show you how to programmatically toggle an element's disabled state.

The most reliable and straightforward way to disable or enable an element is to access its disabled DOM property. This property is a simple boolean: setting it to true disables the element, and setting it to false enables it.

Problem: you have a button that you need to disable programmatically, for example, after it has been clicked to prevent double submissions.

HTML:

<button id="submit-btn">Submit</button>

Solution: select the element and set its .disabled property to true.

const submitButton = document.getElementById('submit-btn');

// To disable the button:
submitButton.disabled = true;

console.log(submitButton.disabled); // Output: true
note

This is the recommended best practice for its clarity and directness. JavaScript will automatically add the disabled attribute to the HTML element.

The Common Pitfall: setAttribute vs. the .disabled Property​

A frequent source of confusion is the difference between the HTML disabled attribute and the JavaScript disabled property.

  • HTML disabled attribute: This is a boolean attribute. Its presence on the element disables it, regardless of its value. To set it, you would use element.setAttribute('disabled', 'true') or element.setAttribute('disabled', ''). This is a more verbose and less direct way to control the state.
  • JavaScript .disabled property: This reflects the current, live state of the element. It is a boolean property (true or false) and is the correct and idiomatic way to get or set the element's disabled status dynamically.
note

For changing the state of an element after the page has loaded, always use the .disabled property, not setAttribute(). It is cleaner, more direct, and less error-prone.

How to Enable an Element​

To re-enable an element, you simply set its .disabled property back to false.

const submitButton = document.getElementById('submit-btn');

// First, disable the button
submitButton.disabled = true;
console.log('Button is disabled:', submitButton.disabled); // Output: true

// Later, to re-enable it:
submitButton.disabled = false;
console.log('Button is disabled:', submitButton.disabled); // Output: false
note

Setting the property to false will automatically remove the disabled attribute from the HTML element.

Practical Example: A "Submit" Button Toggle​

This script demonstrates a common UI pattern. A "Submit" button is disabled until the user types something into a required input field.

HTML:

<input id="text-input" type="text" placeholder="Type something to enable the button">
<button id="submit-btn" disabled>Submit</button>

JavaScript:

const textInput = document.getElementById('text-input');
const submitButton = document.getElementById('submit-btn');

textInput.addEventListener('input', () => {
  // Check if the input's value, after trimming whitespace, is not empty.
  const isInputValid = textInput.value.trim() !== '';
  
  // The button's `disabled` state is the opposite of the input's valid state.
  // If input is valid, disabled should be false.
  // If input is invalid, disabled should be true.
  submitButton.disabled = !isInputValid;
});
note

This provides immediate, intuitive feedback to the user, guiding them to fill out the form correctly.

Conclusion​

Controlling the disabled state of an element is simple if you use the correct DOM property.

  • To disable an element, set its .disabled property to true.
  • To enable an element, set its .disabled property to false.
  • Always use the .disabled property for dynamic changes, and avoid using setAttribute('disabled', ...) and removeAttribute('disabled'), as the boolean property is cleaner and more direct.

Table of Contents