Skip to main content

How to Check for Boolean Attributes (disabled, required) in JavaScript

In JavaScript, you often need to check the state of form elements to determine if they are interactive or valid. Two of the most common checks are for the disabled and required attributes. While these are distinct properties, the method for checking them is identical because they are both boolean attributes.

This guide will teach you the single, correct way to check for boolean attributes like disabled and required using direct DOM properties. You will also learn why using getAttribute() is a common but flawed approach, and how to properly set and remove these attributes in your code.

The Correct Method: Using DOM Boolean Properties​

The most reliable and readable way to check for a boolean attribute is to access its corresponding property directly on the DOM element. These properties return a true boolean value (true or false).

  • To check if an element is disabled, use the element.disabled property.
  • To check if an element is required, use the element.required property.

We will use these input elements for our examples.

<input
  disabled
  type="text"
  id="first_name"
/>

<input
  required
  type="email"
  id="user_email"
/>

The solution is by accessing the property directly, you get a clear and predictable boolean result.

// --- Checking the 'disabled' attribute ---
const firstNameInput = document.getElementById('first_name');

console.log(firstNameInput.disabled); // Output: true

if (firstNameInput.disabled) {
  console.log('✅ The first name input is disabled.');
} else {
  console.log('⛔️ The first name input is not disabled.');
}


// --- Checking the 'required' attribute ---
const emailInput = document.getElementById('user_email');

console.log(emailInput.required); // Output: true

if (emailInput.required) {
  console.log('✅ The email input is required.');
} else {
  console.log('⛔️ The email input is not required.');
}

The Incorrect Method to Avoid: getAttribute()​

A common mistake is to use the element.getAttribute() method to check for a boolean attribute. This approach is unreliable and can lead to bugs.

The getAttribute() method returns the value of an attribute as a string. In HTML, boolean attributes like disabled or required don't need a value; their mere presence means true. When they are present without a value, getAttribute() returns an empty string ("").

const element = document.getElementById('first_name');

// This returns an empty string, NOT true.
console.log(element.getAttribute('disabled')); // Output: ""

// This logic is therefore FLAWED!
if (element.getAttribute('disabled')) {
  // This block will NOT run because an empty string is "falsy".
  console.log('✅ element is disabled');
} else {
  console.log('⛔️ element is not disabled'); // This runs incorrectly.
}

Because an empty string is a "falsy" value in JavaScript, the if condition fails, giving you a false negative. Your code will think the element is not disabled when it actually is. For this reason, you should always use the direct DOM property for checking boolean attributes.

How to Set and Remove Boolean Attributes​

You can dynamically change these attributes in two primary ways.

1. Setting and Removing with the DOM Property​

This is often the cleanest way. Setting the property to true adds the attribute, and setting it to false removes it.

const element = document.getElementById('first_name');

// To disable the element:
element.disabled = true;

// To enable the element:
element.disabled = false;

2. Setting and Removing with setAttribute() and removeAttribute()​

This method more directly manipulates the HTML attribute itself. It's standard practice to set the value of a boolean attribute to an empty string.

const element = document.getElementById('first_name');

// To disable the element (add the attribute):
element.setAttribute('disabled', '');

// To enable the element (remove the attribute):
element.removeAttribute('disabled');

Conclusion​

Checking for boolean attributes in JavaScript is straightforward as long as you use the correct method.

  • Always use direct DOM properties like element.disabled and element.required. They return a true boolean (true/false) and are the most reliable way to check the state of an element.
  • Avoid using getAttribute() for boolean attributes, as it can return an empty string that behaves as a falsy value, leading to incorrect logic.
  • To change the state, you can either set the boolean property directly (element.disabled = true;) or use setAttribute() and removeAttribute().

Table of Contents