jQuery 单击锚标记时，将 HTML 文本输入的 readonly 属性设置为 false
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16298281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set readonly property to false for an HTML text input on clicking an anchor tag
提问by thunderbird
My HTML:
我的 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
我的 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
替代 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 readonlyattribute of the corresponding input text field to false on click of the corresponding anchor field. None of my JavaScript scripts works.
我想要做的是readonly在单击相应的锚点字段时将相应输入文本字段的属性设置为 false。我的 JavaScript 脚本都不起作用。
Solution: after combining @KaraokeStu, @bipin answers I am using asp.net 4.5
解决方案：结合@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");
});
});
回答by bipen
回答by Quentin
The readonlyattribute is a boolean. You can't set it to trueor false, you can set it to readonlyor not set it at all (readonly=""is wrong, you can leave the value off (readonly) or specify the correct value (readonly="readonly")).
该readonly属性是一个布尔值。您不能将其设置为trueor false，您可以将其设置为readonly或根本不设置（readonly=""错误，您可以将该值保留为关闭 ( readonly) 或指定正确的值 ( readonly="readonly") ）。
If you want to change the readonly status of an element in the DOM, then set the readonlypropertyto trueor false. Leave the attribute alone.
如果要更改 DOM 中某个元素的只读状态，请将该readonly属性设置为true或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>回答by Terry Young
You either do this:
你要么这样做：
$(selector).attr('readonly', 'readonly');
$(selector).removeAttr('readonly');
Or this:
或这个：
$(selector).prop('readonly', true);
$(selector).prop('readonly', false);
Nevermix 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.
不难记住。请记住，在使用 .attr() 时，您正在处理 Attribute 值。使用 .prop() 时，您正在处理 DOM 属性。
回答by simhumileco
You can do it without jQuery:
你可以在没有 jQuery 的情况下做到：
Set readOnly:
设置readOnly：
document.getElementById("name").readOnly = true;
and unset:
并取消设置：
document.getElementById("name").readOnly = false;
Everything in pure Vanilla JS.
一切都在纯香草 JS 中。
回答by Suresh Atta
回答by Aleks G
In order to set the readonlyto false, you need to complete remove the attribute from the input field:
为了将 设置readonly为 false，您需要从输入字段中完成删除该属性：
$("#name").removeAttr("readonly");
回答by Freeman Lambda
$('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');
});
回答by KaraokeStu
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/
如此处所示：http: //jsfiddle.net/uDCgE/
回答by Sandeep Mishra
set element property readonly="readonly"
设置元素属性 readonly="readonly"
