How to use input readonly attribute in jQuery ?

Use jQuery methods to add the readonly attribute to the form input field.

  • jQuery attr() Method: This method set/return attributes and values of the selected elements. If this method is used to return the attribute value, it returns the value of the first selected element.If this method is used to set attribute values, it sets one or more than one attribute/value pairs for the set of selected elements.

    Syntax:



    • Return the value of an attribute:

      $(selector).attr(attribute)
      
    • Set the attribute and value:

      $(selector).attr(attribute, value)
      
    • Set attribute and value using a function:

      $(selector).attr(attribute, function(index, currentvalue))
      
    • Set multiple attributes and values:

      $(selector).attr({attribute:value, attribute:value, ...})
      

    Parameters:

    • attribute: This parameter specifies the name of the attribute.
    • value: This parameter specifies the value of the attribute.
    • function(index, currentvalue): This parameter specifies a function that returns the attribute value to set.

      • index: This parameter receives the index position of element in the set.
      • currentValue: This parameter receives the current attribute value of selected elements.
  • jQuery prop() Method: This method set/return properties and values of the matched elements. If this method is used to set or return the property value, it returns the value of the first selected element. If this method is used to set property values, it sets one or more property/value pairs for the set of selected elements.

    Syntax:

    • Return the value of an property:

      $(selector).prop(property)
      
    • Set the property and value:


      $(selector).prop(property, value)
      
    • Set property and value using a function:

      $(selector).prop(property, function(index, currentvalue))
      
    • Set multiple properties and values:

      $(selector).prop({property:value, property:value, ...})
      

    Parameters:

    • property: This parameter specifies the name of the property.
    • value: This parameter specifies the value of the property.
    • function(index, currentvalue): This parameter specifies a function that returns the property value to set.

      • index: This parameter receives the index position of element in the set.
      • currentValue: This parameter receives the current property value of selected elements.

Example 1: In this example the read-only attribute of form input text field is enabled by using attr() method.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Add a readonly attribute to an input field
        </title>
          
        <script src
        </script>
    </head
      
    <body style = "text-align:center;"
      
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
          
        <p style = "font-size: 15px; font-weight: bold;">
            The readonly attribute is added to input box
            on click on the button.
        </p>
          
        <form>
            Input : <input type="text" name="input_field" />
        </form>
        <br>
          
        <button onclick = "GFG_Run()">
            click here
        </button>
          
        <p id = "GFG_down" style
            "color: green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            function GFG_Run() {
                  
                $('input').attr('readonly', true);
                document.getElementById("GFG_down").innerHTML 
                        = "Read-Only attribute enabled";
            }
        </script
    </body
</html>                    

chevron_right


Output:

  • Before click on the button:
  • After click on the button:

Example 2: In this example the read-only attribute of form input text field is enabled by using prop() method .

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Add a readonly attribute to an input tag
        </title>
          
        <script src
        </script>
    </head
      
    <body style = "text-align:center;">
           
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
          
        <p style = "font-size: 15px; font-weight: bold;">
            The readonly attribute is added to input box
            on click on the button.
        </p>
          
        <form>
            Input : <input type="text" name="input_field" />
        </form>
        <br>
          
        <button onclick = "GFG_Run()">
            click here
        </button>
          
        <p id = "GFG_down" style
            "color: green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            function GFG_Run() {
                $('input').prop('readonly', true);
                document.getElementById("GFG_down").innerHTML
                        = "Read-Only attribute enabled";
            }
        </script
    </body
</html>                    

chevron_right


Output:

  • Before click on the button:
  • After click on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.