Check if an Element is Read-Only in JavaScript

# Check if an Element is Read-Only in JavaScript

Use the readOnly property to check if an element is read-only, e.g. if (element.readOnly) {}.

The readOnly property returns true when the element is read-only, otherwise false is returned.

Here is the HTML for the examples.

index.html

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

  <body>
    <input
      readonly
      type="text"
      id="first_name"
      name="first_name"
      value="James"
    />

    <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.readOnly); // 👉️ true

if (element.readOnly) {
  console.log('✅ element is read-only');
} else {
  console.log('⛔️ element is not read-only');
}

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

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

check if element is read only

The code for this article is available on GitHub

The readOnly property on an element returns true if the element is read-only and false otherwise.

When the readonly attribute is set on the element, the element is not mutable and cannot be edited by the user.

You should always use the readOnly property to check if an element is read-only.

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

index.js

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

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

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

dont use getattribute method to check for readonly

The code for this article is available on GitHub

Note that the attribute name is spelled in all lowercase, however, when accessing the property on the element, it is in camel case - readOnly.

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 readonly, 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 readonly 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 readonly attribute from an element, use the removeAttribute() method.

index.js

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

element.removeAttribute('readonly');

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 readonly attribute on an element, use the setAttribute() method.

index.js

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

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

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 readonly attribute because it's a best practice to set boolean attributes without a value.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

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 Read-Only in JavaScript

# Check if an Element is Read-Only in JavaScript

# Additional Resources

Borislav Hadzhiev