Remove readonly attribute jQuery
There can be scenarios where we need certain readonly input fields to disallow user inputs. It is handled with some event handlers to enable back for user input. For enabling readonly input it requires removing readonly attribute jquery.
Here we will go through multiple ways to remove readonly attribute jquery. There can be discrepancies depending on the Jquery version, therefore, covering here some possible workarounds to achieve the expected result.
Let's dive into code in the following step-by-step approach:
Scroll for More Useful Information and Relevant FAQs
- Remove readonly attribute using
removeAttrwith example code - Remove readonly attribute using
attrin jQuery with an example - Remove readonly attribute using a
propmethod in jQuery with an example code - Remove readonly attribute using
removeAttributein Javascript - Feedback: Your input is valuable to us. Please provide feedback on this article.
Remove readonly attribute using removeAttr with example code
Let's suppose we have readonly input field
<input type="text" name="employee" id="emp" value="Enter Employee" readonly>
With a name as
As we know Jquery is a feature-rich library built to ease javascript requirements for websites. The built-in method removeAttr uses the javascript function removeAttribute to remove attributes for all matched elements.
Let's dive into following code for overview:
$('#emp').removeAttr('readonly');
Code Explanation:
$('#emp')used to match all elements with id defined as emp.-
Method
removeAttris used here to remove attribute readonly for matching Html elements.
Note: Please make sure to call the removeAttr method in a proper event handler (On click, page load, hover, etc) as applicable.
In the above program, we saw deleting attributes for form input with a certain id.
What if we need to remove attributes from div, p, or other Html tags?
Here is the code to remove a style from div using jquery
Let's assume we have div with background color added as inline styles as below
<div style="background-color: red">test1</div>
<div style="background-color: green">test2</div>
Jquery code to remove style
$('div').removeAttr('style');
Code Explanation:
$('div')will match all div on the page-
removeAttr('style')is used to remove style from each matched div found on the page.
In case we need to perform the above operation on any specific div with a specific id, then we can do like
$('div#panel').removeAttr('style');
Here $('div#id') matches the div tag with the id panel and performs a style removal operation.
Remove readonly attribute using attr in jQuery with an example
jQuery attr can be used in multiple ways depending on the argument passed. Please refer here for more detail about attr.
In the current article, we are here to remove the readonly attribute. So let's see how the attr method performs to remove boolean attribute readonly.
Considering same employee input for demonstration
<input type="text" name="employee" id="emp" value="Enter Employee" readonly>
jQuery code by using attr method :
$('#emp').attr('readonly', false);
Code Explanation:
- Here attr function is used to set value for attribute readonly to false.
- Once executed above code will enable editing employee input text.
On the contrary, to make the input box readonly by setting readonly value to true.
?? $('#emp').attr('readonly', true);
Remove readonly attribute using a prop method in jQuery with an example code
jQuery prop method also supports setting attribute value the same as attr method does but attr returns the initial state of the property whereas prop returns the current state.
The following code demonstrates using the prop method to set readonly to false to make it editable.
Text input:
<input type="text" name="employee" id="emp" value="Enter Employee" readonly>
jQuery Code using prop method
$('#emp').prop('readonly', false);
Code Explanation:
- Here prop function is used to set value for boolean attribute readonly to false.
- After executing the above code it will allow the text box to enter text.
Using name instead of id
$('input[name="employee"]').prop('readonly', false);
Note. We might see inconsistent behavior while using the attr or prop method which depends on the jQuery version we used. Therefore it is advisable to workaround with prop/attr as applicable based on the jquery version.
Remove readonly attribute using removeAttribute in Javascript
As we have gone through multiple ways to remove attributes as expected. Here we will see javascript code to remove readonly by id as below
document.getElementById('emp').removeAttribute('readonly');
Code Explanation:
- As mentioned before while learning the removeattr method that uses the javascript function removeAttribute. Here we can see removeAttribute uses.
- The above code will work for elements with emp id in the document and apply removeAttribute on that.
- It is advisable to use jquery functions as described before to support cross-browser platforms to overcome some inconsistent behavior.
