我的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");
});
});
答案 0 :(得分:26)
答案 1 :(得分:8)
readonly
属性是布尔值。您无法将其设置为true
或false
,您可以将其设置为readonly
或根本不设置(readonly=""
错误,您可以将值保留(readonly
)或指定正确的值(readonly="readonly"
)。
如果要更改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>
答案 2 :(得分:4)
你要么这样做:
$(selector).attr('readonly', 'readonly');
$(selector).removeAttr('readonly');
或者这个:
$(selector).prop('readonly', true);
$(selector).prop('readonly', false);
从不混合两者。
记忆并不难。请记住,在使用.attr()时,您需要处理属性值。使用.prop()时,您正在处理DOM属性。
答案 3 :(得分:1)
答案 4 :(得分:1)
你可以不用jQuery来做到这一点:
设置readOnly
:
document.getElementById("name").readOnly = true;
并取消设置:
document.getElementById("name").readOnly = false;
纯粹Vanilla JS中的一切。
答案 5 :(得分:0)
要将readonly
设置为false,您需要从输入字段中删除该属性:
$("#name").removeAttr("readonly");
答案 6 :(得分: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');
});
答案 7 :(得分:0)
您可以使用以下代码:
<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>
答案 8 :(得分:0)
连同提供的答案,为了完成对 readonly
属性的描述,作为 boolean 属性,想提一下,相反对于经典编程语言中使用的术语,其中布尔值是能够具有两种状态的变量:真或假,W3C 在 following way 中定义了一个布尔属性:
元素上布尔属性的存在表示
true
值,并且该属性的缺失表示
false
值。
如果属性存在,它的值必须是空字符串 或作为属性的不区分大小写的 ASCII 匹配的值 规范名称,没有前导或尾随空格。
注意:布尔属性不允许使用值“true”和“false”。要表示假值,该属性必须是 完全省略。
所以,jQuery
$("#demo").prop('readonly', false);
只是一种删除只读属性
的语法document.getElementById("demo").removeAttribute("readonly");
任何其他方法,例如将其设置为 false 或其他值(例如 0)都不会“启用”输入...
答案 9 :(得分:-2)
设置元素属性readonly="readonly"