Set readonly property to false for an HTML text input on clicking an anchor tag

Question

My HTML:

<div class="profileForm">
    <fieldset>
    <label>Name<input type="text" id="name" name="name" runat="server" readonly=""/></label>
    <label>Email<input type="email" id="email" name="email" runat="server" readonly=""/></label>
    <label>Date Of Birth<input type="date" id="dob" name="dob" runat="server" readonly=""/></label>
    <label>Address<input type="text" id="address" name="address" runat="server" readonly=""/></label>
    <label>City<input type="text" id="city" name="city" runat="server" readonly=""/></label>
    <label>State<input type="text" id="state" name="state" runat="server" readonly=""/></label>
    <label>Country<input type="text" id="country" name="country" runat="server" readonly=""/></label>
    <label>Access Level<input type="text" id="accessLevel" name="accessLevel" runat="server" readonly=""/></label>
    </fieldset>
</div>
<div class="profileEdit">
    <fieldset>
        <label><a href="#" id="Aname">edit</a></label>
        <label><a href="#" id="Aemail">edit</a></label>
        <label><a href="#" id="Adob">edit</a></label>
        <label><a href="#" id="Aaddress">edit</a></label>
        <label><a href="#" id="Acity">edit</a></label>
        <label><a href="#" id="Astate">edit</a></label>
        <label><a href="#" id="Acountry">edit</a></label>
    </fieldset>
</div>

My JavaScript

<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        console.log("document ready")
        $("profileEdit label a").click(
        function (e) {
            if (this.attr("id") == "Aname") {
                $("#name").attr("readonly", false);
            }
        });
    });
</script>

Alternate JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        console.log("document ready")
        $('#Aname').live('click', function () {
            $("#name").attr("readonly", false);
        });
    });
</script>

What I am trying to do is set readonly attribute of the corresponding input text field to false on click of the corresponding anchor field. None of my JavaScript scripts works.

Solution: after combining @KaraokeStu, @bipin answers I am using asp.net 4.5

$(document).ready(function () {
        console.log("document ready")
        $('.profileEdit label a').live('click', function () {
            alert("ctl00_ContentPlaceHolder1_" + this.id.substring(1, this.id.length));
            $("#" + "ctl00_ContentPlaceHolder1_" + this.id.substring(1, this.id.length)).prop('readonly', false);
            console.log($("#" + "ctl00_ContentPlaceHolder1_" + this.id.substring(1, this.id.length)).attr('readonly'))
            $("#" + "ctl00_ContentPlaceHolder1_" + this.id.substring(1, this.id.length)).focus();
            alert("done");
       });

    });

Please clarify your request. The question title reads 'set to true' while the bottom line of your question reads 'set to false'. — Freeman Lambda, Apr 30 '13 at 11:14

score 37 · Accepted Answer · answered Apr 30 '13 at 11:03

37

change the readonly property of an element..use prop()

 $("#name").prop('readonly', false);

link to read more about prop() and attr()

answered Apr 30 '13 at 11:03

bipen

36,319
9
49
62

Is #name the property's name or ID? – Cullub Jan 23 '16 at 17:20
1

@cullub its ID, as you can see I am using `$("#name")` jquery id selector (`#` in front is id, `.` is class) . – bipen Jan 27 '16 at 11:07
1

readonly=false in chrome doesnt work here, only removing it completely works. – Mike Flynn Sep 14 '17 at 13:54

Quentin · Answer 2 · 2018-06-12T14:14:37.790

12

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>

edited Jun 12 '18 at 14:14

answered Apr 30 '13 at 11:04

Quentin

914,110
126
1,211
1,335

Does this work if you start with readonly = "readonly"? I.e. instead of just readonly with no value? – Adanay Martín Jun 12 '18 at 15:02
Yes. That's completely equivalent HTML. – Quentin Jun 12 '18 at 15:02

score 6 · Answer 3 · answered May 30 '17 at 12:24

6

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.

answered May 30 '17 at 12:24

simhumileco

31,877
16
137
115

score 5 · Answer 4 · answered Apr 30 '13 at 11:30

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.

score 1 · Answer 5 · answered Apr 30 '13 at 11:03

1

Try this

 $("#name").removeAttr('readonly');

See here.

WORKING DEMO

answered Apr 30 '13 at 11:03

Suresh Atta

120,458
37
198
307

score 1 · Answer 6 · answered Apr 30 '13 at 11:04

1

In order to set the readonly to false, you need to complete remove the attribute from the input field:

$("#name").removeAttr("readonly");

answered Apr 30 '13 at 11:04

Aleks G

56,435
29
168
265

score 1 · Answer 7 · answered May 22 '21 at 10:37

Along with the provided answer, in order to complete the description of the readonly attribute, as a boolean attribute, would like to mention that, contrarily to the terminology used in classicel programming languages, where a boolean is a variable able to have two states: true or false, W3C defines a boolean attribute in the following way :

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

Note: The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

So, the jQuery

$("#demo").prop('readonly', false);

is only a syntax to remove the readonly attribute

document.getElementById("demo").removeAttribute("readonly");

any other approach, like setting it to false or another value (like 0) will not 'eable' the input...

In reality, it depensd on actual browser implementations. As is the case with any invalid markup. readonly="false" is invalid, therefor it's up to the browser — Dercsár, May 02 '22 at 09:46

score 0 · Answer 8 · answered Apr 30 '13 at 11:09

0

$('div.profileEdit a').click(function() {
    // extract corresponding label id
    var labelId = $(this).attr('id').split('A')[1];
    // make corresponding label readonly
    $('input#'+labelId).attr('readonly','readonly');
});

answered Apr 30 '13 at 11:09

Freeman Lambda

3,567
1
25
33

score 0 · Answer 9 · answered Apr 30 '13 at 11:12

0

You can use the following code:

<script>
$(document).ready(function () {
    $(".profileEdit label a").each(function (e) {
        $(this).click(function (elem) {
           $("#" + this.id.substring(1,this.id.length)).attr("readonly", false); 
        });
    });    
});
</script>

As demonstrated here: http://jsfiddle.net/uDCgE/

answered Apr 30 '13 at 11:12

KaraokeStu

758
7
17

nice idea actually. your code didnt wait for the click though. you might need to remove the `each(function(e){`. also since i am using asp.net i had to add `"ctl00_ContentPlaceHolder1_"` string to the beginning of the id as `ClientId` wouldnt work on javascript strings. – thunderbird Apr 30 '13 at 12:46
It's all fun and games when you mix client-side and server-side code, eh? – KaraokeStu Apr 30 '13 at 12:51
this is what i arrived at after combining your and @bipen answers.asp.net changes id's of all runat="server" controls which kinda sucks. – thunderbird Apr 30 '13 at 12:57

score -2 · Answer 10 · edited Aug 05 '14 at 08:39

-2

set element property readonly="readonly"

edited Aug 05 '14 at 08:39

Mo.

26,306
36
159
225

answered Aug 05 '14 at 08:19

Sandeep Mishra

63
1
2

Set readonly property to false for an HTML text input on clicking an anchor tag

10 Answers10

Linked