单击锚标记时，将 HTML 文本输入的 readonly 属性设置为 false

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");
       });

    });

Answer 1

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

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

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

Answer 2

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>

Answer 3

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.

Answer 4

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 .

Answer 5

Try this

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

See here.

WORKING DEMO

Answer 6

为了将readonly设置为 false，您需要从输入字段中完成删除该属性：

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

Answer 7

$('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');
});

Answer 8

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/

Answer 9

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...

Answer 10

设置元素属性readonly="readonly"