How to use input readonly attribute in jQuery?

jQuery Web Development Front End Technology

The readonly is an HTML attribute that we can add to any HTML tag. Whenever we use the readonly attribute with any HTML element, it becomes non-editable. Users can’t write into the text field but can only read.

In this tutorial, we will learn to add the readonly attribute to the HTML element using the various methods of jQuery.

Use the attr() method of jQuery

The attr() method of jQuery sets the attribute to the HTML element. It takes two parameters, and we can pass the attribute name as the first parameter and the attribute value as the second parameter.

Syntax

Users can follow the syntax below to use the attr() method to make input readonly using JQuery.

$("#CSS_selector ").attr("readonly", true);

In the above syntax, we have passed the attribute name ‘readonly’ as the first parameter of the attr() method and true as a second parameter representing the value of the ‘readonly’ attribute.

Example

In the example below, we created the input field to take user text input. After that, we created the two buttons with the text ‘MakeReadonly’ and ‘Make Writable.’ Whenever users click the button, it invokes the addReadonly() and removeReadonly() functions, respectively.

In the addReadonly() function, we use the attr() method to add a readonly attribute with a true value. In the removeReadonly() function, we add the readonly attribute with the false value.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head> 
<body>
   <h3>Using the <i> attr() method </i> of JQuery to set the readonly attribute to the HTML element</h3>
   <p>Click the respective buttons to add and remove the readonly attribute from the below input.</p>
   <input type = "text" id = "text_inp">
   <br> <br>
   <button onclick = "addReadonly()"> Make Readonly </button>
   <button onclick = "removeReadonly()"> Make Writable </button>
   <script>
      function addReadonly() {
         $("#text_inp").attr("readonly", true);
      }
      function removeReadonly() {
         $("#text_inp").attr("readonly", false);
      }
   </script>
</body>
</html>

Use the prop() method of jQuery

The prop() method is very similar to the attr() method. The attr() method is used to set the attribute for an HTML element, but the prop() method is used to add a property for an HTML element. It also takes the two parameters like the attr() method.

Syntax

Users can follow the syntax below to use the prop() method to make input readonly using JQuery.

$("CSS_selector").prop("readonly", true);

In the above syntax, CSS_selector is an HTML element’s identifier to select an element and add readonly property using the prop() method.

Example

In the example below, whenever the user presses the button, it will invoke the makeReadonly() function. In the Makereadonly() function, we use the prop() method to add the readonly property with the true value to the input element.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
   <h3>Using the <i> prop() method </i> of JQuery to set the readonly attribute to the HTML element</h3>
   <input type = "text" id = "inp">
   <br> <br>
   <button onclick = "makeReadonly()"> Make Readonly </button>
   <script>
      function makeReadonly() {
         $("#inp").prop("readonly", true);
      }
   </script>
</body> 
</html>

In the output, users can observe that text input becomes uneditable when they press the button.

Users learned to use the readonly attribute in JQuery. Users can use the attr() or prop() method to make input readonly using JQuery. Also, users can remove the readonly attribute using the attr() and prop() methods by passing the false as a value of the readonly attribute.