How to use input readonly attribute in jQuery ? Last Updated : 03 Aug, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. html <!DOCTYPE HTML> <html> <head> <title> Add a readonly attribute to an input field </title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </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> 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 . html <!DOCTYPE HTML> <html> <head> <title> Add a readonly attribute to an input tag </title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </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> Output: Before click on the button: After click on the button: jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples. Comment More infoAdvertise with us Next Article How to use input readonly attribute in jQuery ? P PranchalKatiyar Follow Improve Article Tags : JQuery Similar Reads How to make a text input non-editable using jQuery ? An HTML document containing the input text area and the task is to make the text input non-editable with the help of jQuery. There are two approaches that are discussed below: Approach 1:We are going to set the property readonly to true. To set the readonly property, we will use a prop() method. Exa 2 min read How to create a Disabled Input using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Disabled Input using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=âstylesheetâ hre 1 min read How to create Label hidden in Input Area using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Label hidden using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=âstylesheetâ href= 1 min read How to disable browser autofill on input fields using jQuery ? In this article, we will see how to disable the browser auto fill property on the input field. For that, HTML page is created in which jQuery CDN is imported to use jQuery and its code is written. Approach: Create a basic HTML page having at least one input field in it with the "id" attribute.Import 2 min read How to find all input elements that are enabled using jQuery? The jQuery " :enabled" pseudo-class selector helps to find all the input element that are enabled. This pseudo-class selector should only be used for selecting HTML elements that support the disabled attribute i.e (<button>, <input>, <textarea>, <select>, <option>, < 2 min read Like