How to Check if an Element is Read-Only in JavaScript

In web development, you often need to determine if an input element is read-only to change its appearance, enable an "edit" button, or perform validation. The correct way to check this is by using the boolean readOnly property on the DOM element, which directly reflects the element's state.

This guide will teach you the right way to check for the readOnly property, explain the common pitfall of using getAttribute(), and show you how to programmatically toggle the read-only state of an element.

The Core Method: The .readOnly Property

The most reliable and straightforward way to check if an element is read-only is to access its readOnly DOM property. This property returns a simple boolean: true if the element is read-only, and false if it is not.

For example, you have an input element that has the readonly attribute and you need to verify its state in JavaScript.

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

Solution: access the .readOnly property directly on the element object. It will be true or false.

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

// The .readOnly property is a direct boolean.
console.log(element.readOnly); // Output: true

if (element.readOnly) {
  console.log('The element is read-only.');
} else {
  console.log('The element is not read-only.');
}
// Output: The element is read-only.

The Common Pitfall: Using getAttribute('readonly')

A frequent mistake is to use the element.getAttribute('readonly') method. This is unreliable because of how boolean attributes are handled in HTML.

Problem: Using getAttribute() might not give you the result you expect, especially when you check its "truthiness."

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

// In HTML, the readonly attribute has no value.
// getAttribute returns an empty string, which is "falsy".
const attrValue = element.getAttribute('readonly');
console.log(attrValue); // Output: ""

// This leads to incorrect logic!
if (attrValue) {
  console.log('The element is read-only.');
} else {
  console.log('The element is NOT read-only.');
}
// Output: The element is NOT read-only. (This is WRONG!)

note

This happens because an empty string ("") evaluates to false in a boolean context, leading to the wrong conclusion.

Why getAttribute is Unreliable for Boolean Attributes

The readonly attribute in HTML is a boolean attribute. Other examples include disabled, checked, and required.

The rule for boolean attributes is simple:

• Their presence on the element means the state is true.
• Their absence from the element means the state is false.

The value of the attribute (e.g., readonly="" or just readonly) is irrelevant. Because of this, JavaScript provides direct DOM properties (like .readOnly, .disabled, .checked) that correctly translate the attribute's presence into a clean true or false boolean for you to use.

Always prefer the DOM property (.readOnly) over the HTML attribute getter (.getAttribute('readonly')) for checking boolean states.

How to Set or Remove the Read-Only State

The easiest way to change an element's read-only state is to set the boolean readOnly property directly.

Solution: setting the property to true or false will automatically add or remove the readonly HTML attribute.

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

// To make the element NOT read-only:
element.readOnly = false;
console.log(element.hasAttribute('readonly')); // Output: false

// To make the element read-only again:
element.readOnly = true;
console.log(element.hasAttribute('readonly')); // Output: true

This is cleaner and more direct than using element.setAttribute('readonly', '') and element.removeAttribute('readonly').

Practical Example: Toggling the Edit State of a Field

This script demonstrates a common UI pattern: an "Edit" button that toggles the readonly state of an input field and changes its own text.

HTML:

<input id="user-email" type="email" value="test@example.com" readonly>
<button id="edit-btn">Edit</button>

JavaScript:

const emailInput = document.getElementById('user-email');
const editButton = document.getElementById('edit-btn');

editButton.addEventListener('click', () => {
  // Flip the boolean state of the readOnly property.
  emailInput.readOnly = !emailInput.readOnly;

  // Update the button text based on the new state.
  if (emailInput.readOnly) {
    editButton.textContent = 'Edit';
    // (Optional: Add logic here to save the new value)
  } else {
    editButton.textContent = 'Save';
    emailInput.focus(); // Focus the input for a better user experience
  }
});

Conclusion

Checking an element's read-only status is simple if you use the correct tool for the job.

• Always use the .readOnly DOM property. It provides a direct and reliable boolean (true/false) value reflecting the element's state.
• Avoid using element.getAttribute('readonly'). It is unreliable for conditional logic because of how boolean attributes are handled in HTML.
• To change the state, simply set the property: element.readOnly = true; or element.readOnly = false;.