Check if an Element is Disabled/Required in JavaScript

# Table of Contents

# Check if an Element is Disabled using JavaScript

Use the disabled property to check if an element is disabled, e.g. if (element.disabled) {}.

The disabled property returns true when the element is disabled, otherwise false is returned.

Here is the HTML for the examples.

index.html

Copied!
<!doctype html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

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

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

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

console.log(element.disabled); // 👉️ true

if (element.disabled) {
  console.log('✅ element is disabled');
} else {
  console.log('⛔️ element is not disabled');
}

// ✅ Set attribute disabled
// element.setAttribute('disabled', '')

// ✅ Remove the attribute disabled
// element.removeAttribute('disabled');

check-if-element-is-disabled

The code for this article is available on GitHub

The disabled property on an element returns true if the element is disabled and false otherwise.

When the disabled attribute is set on the element, the element is not mutable and cannot be focused.

You should always use the disabled property to check if an element is disabled.

# Why you shouldn't use the `getAttribute()` method

Some examples online use the getAttribute() method on the element. However, boolean attributes like disabled might not have a value.

index.js

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

// 👇️ returns empty string
console.log(element.getAttribute('disabled'));

// ❌ DON'T DO THIS
if (element.getAttribute('disabled')) {
  console.log('✅ element is disabled');
} else {
  console.log('⛔️ element is not disabled');
}

why you should not use getattribute method

The code for this article is available on GitHub

The getAttribute() method returns the value of the provided attribute on the element.

However, it's a best practice to set boolean attributes, such as disabled, without a value.

If a boolean attribute is present at all, regardless of the value, its value is considered to be true.

If a boolean attribute is not present, the value of the attribute is considered to be false.

Therefore, the disabled attribute could be set without a value on the element and the getAttribute() method would return a false negative.

If you need to remove the disabled attribute from an element, use the removeAttribute() method.

index.js

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

// ✅ Remove attribute disabled
element.removeAttribute('disabled');

The removeAttribute method removes the provided attribute from the element.

If the attribute doesn't exist on the element, the method returns without throwing an error.

If you need to set the disabled attribute on an element, use the setAttribute() method.

index.js

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

// ✅ Set attribute disabled
element.setAttribute('disabled', '');

The method takes the following 2 parameters:

name - the name of the attribute to be set.
value- the value to assign to the attribute.

We provided an empty string as the value for the disabled attribute because it's a best practice to set boolean attributes without a value.

# Check if an Element is Required using JavaScript

Use the required property to check if an element is required.

The required property returns true when the element is required, otherwise false is returned.

Here is the HTML for the examples.

index.html

Copied!
<!doctype html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input
      required
      type="text"
      id="first_name"
      name="first_name"
    />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

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

console.log(element.required); // 👉️ true

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

// ✅ Set the required attribute
// element.setAttribute('required', '')

// ✅ Remove the required attribute
// element.removeAttribute('required');

check if element is required using javascript

The code for this article is available on GitHub

The required property on an element returns true if the element is required and false otherwise.

When the required attribute is set on an element, the user must specify a value for the input before the form can be submitted.

You should always use the required property to check if an element is required.

# Caveats when using getAttribute to check if required

Some examples online use the getAttribute() method on the element, however boolean attributes like required might not have a value.

index.js

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

// 👇️ returns an empty string
console.log(element.getAttribute('required'));

// ❌ DON'T DO THIS
if (element.getAttribute('required')) {
  console.log('✅ element is required');
} else {
  console.log('⛔️ element is not required');
}

The code for this article is available on GitHub

The getAttribute() method returns the value of the provided attribute on the element.

However, it's a best practice to set boolean attributes, such as required, without a value.

If a boolean attribute is present at all, regardless of the value, its value is considered to be true.

If a boolean attribute is not present, the value of the attribute is considered to be false.

Therefore the required attribute could be set without a value on the element and the getAttribute() method would return a false negative.

If you need to remove the required attribute from an element, use the removeAttribute() method.

index.js

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

element.removeAttribute('required');

The removeAttribute() method removes the provided attribute from the element.

If the attribute does not exist on the element, the method returns without throwing an error.

If you need to set the required attribute on an element, use the setAttribute() method.

index.js

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

element.setAttribute('required', '');

The code for this article is available on GitHub

The method takes the following 2 parameters:

name - the name of the attribute to be set.
value- the value to assign to the attribute.

We provided an empty string as the value for the required attribute because it's a best practice to set boolean attributes without a value.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Check if an Element is Disabled/Required in JavaScript

# Table of Contents

# Check if an Element is Disabled using JavaScript

# Why you shouldn't use the getAttribute() method

# Check if an Element is Required using JavaScript

# Caveats when using getAttribute to check if required

Borislav Hadzhiev

# Why you shouldn't use the `getAttribute()` method