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.