Set readonly property to false for an HTML text input on clicking an anchor tag
The readonly
attribute is a boolean. You can't set it to true
or false
, you can set it to readonly
or not set it at all (readonly=""
is wrong, you can leave the value off (readonly
) or specify the correct value (readonly="readonly"
)).
If you want to change the readonly status of an element in the DOM, then set the readonly
property to true
or false
. Leave the attribute alone.
$("#name").prop("readonly", false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id=name readonly>
change the readonly property of an element..use prop()
$("#name").prop('readonly', false);
link to read more about prop() and attr()
You can do it without jQuery:
Set readOnly
:
document.getElementById("name").readOnly = true;
and unset:
document.getElementById("name").readOnly = false;
Everything in pure Vanilla JS.
You either do this:
$(selector).attr('readonly', 'readonly');
$(selector).removeAttr('readonly');
Or this:
$(selector).prop('readonly', true);
$(selector).prop('readonly', false);
Never mix the two.
It's not hard to memorize. Just remember when using .attr(), you're dealing with Attribute values. When using .prop(), you're dealing with the DOM properties.