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

Question

我的 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>

我的 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>

备用 JavaScript

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

我要做的是readonly在单击相应的锚字段时将相应输入文本字段的属性设置为 false。我的 JavaScript 脚本都不起作用。

解决方案：结合@KaraokeStu 后，@bipin 回答我使用的是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

更改元素的只读属性..使用prop()

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

链接以阅读有关 prop() 和 attr() 的更多信息

Answer 2

该readonly属性是一个布尔值。您不能将其设置为trueor false，您可以将其设置为readonly或根本不设置它（readonly=""错误，您可以关闭该值 ( readonly) 或指定正确的值 ( readonly="readonly")）。

如果要更改 DOM 中元素的只读状态，请将readonly 属性设置为trueor false。不理会属性。

$("#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

你要么这样做：

$(selector).attr('readonly', 'readonly');
$(selector).removeAttr('readonly');

或这个：

$(selector).prop('readonly', true);
$(selector).prop('readonly', false);

切勿将两者混合。

记住并不难。请记住，在使用 .attr() 时，您正在处理属性值。使用 .prop() 时，您正在处理 DOM 属性。

Answer 4

你可以在没有 jQuery 的情况下做到这一点：

设置readOnly：

document.getElementById("name").readOnly = true;

并取消设置：

document.getElementById("name").readOnly = false;

纯香草 JS中的一切。

Answer 5

尝试这个

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

见这里。

工作演示

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

您可以使用以下代码：

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

如此处所示：http: //jsfiddle.net/uDCgE/

Answer 9

除了提供的答案之外，为了完成属性的描述readonly，作为布尔属性，想提一下，与经典编程语言中使用的术语相反，其中布尔值是一个能够具有两种状态的变量：真或 false，W3C 以下列方式定义布尔属性：

元素上布尔属性的存在表示 值，属性的缺失表示值 。truefalse

如果该属性存在，则其值必须是空字符串或与属性的规范名称匹配的不区分大小写的 ASCII 值，并且没有前导或尾随空格。

注意：布尔属性不允许使用值“true”和“false”。要表示假值，必须完全省略该属性。

所以，jQuery

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

只是删除只读属性的语法

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

任何其他方法，例如将其设置为false或其他值（例如0）都不会“启用”输入...

Answer 10

设置元素属性readonly="readonly"