使用 jquery 1.6 .prop() 将控件设置为只读答案

【问题标题】：Setting a control to readonly using jquery 1.6 .prop()使用 jquery 1.6 .prop() 将控件设置为只读
【发布时间】：2011-08-19 00:04:11
【问题描述】：

随着 jQuery 1.6 的发布，对 SO 的建议通常是在您过去使用 attr() 的地方开始使用 prop()。

当我想让一个元素只读时会发生什么？

$('.control').prop('readonly', 'readonly');
$('.control').prop('readonly', true);

这些似乎都没有使控件成为只读的。将元素设置为只读是规则的例外吗？

【问题讨论】：

你不应该在任何你使用attr()的地方使用prop()，只是当你想访问一个属性或一个HTML属性时（我认为）。
@alex 你应该在很多情况下使用prop()，因为attr() 可以引用原始标记属性值，它可能为空和/或与@987654326 的当前值不同@（属性）。
我认为他指的是我发表的评论：“开始使用 prop()，而你曾经使用 attr()”。这并不完全正确 - 仅在必要时使用它（即访问属性）。

标签： jquery readonly jquery-1.6

【解决方案1】：

问题是属性名称区分大小写。试试：

$('.control').prop('readOnly', true);

虽然我真的不知道为什么这需要 jQuery。这同样有效：

document.getElementsByClassName("control")[0].readOnly = true;

【讨论】：

我不会使用您给出的第二个示例，仅考虑可读性。这可能太明显而无法提及，但您在宣传时似乎没有考虑到这一点
这取决于你如何衡量可读性。 $() 和 prop() 的语义对于没有 JavaScript 和 jQuery 经验的人来说并不明显。另一方面，getElementsByClassName() 几乎可以准确地告诉您它的作用。有话要说支持自记录代码。
你看到第二个语句有多长了吗？ 25 个字符。我们没有时间。

【解决方案2】：

试试这个：

$(".control").prop({ readOnly: true });

我是这样想的：.attr() 获取 html 标记中的默认值，而 .prop() 动态获取/设置值。请看以下内容：

<input id="someInput" readonly="readOnly" />

$(".control").attr("readOnly") // would yield "readOnly"
$(".control").prop("readOnly") // would yield true
$(".control").is(":readOnly")  // would yield true

api 文档是这样说的：

属性和属性的区别属性可能很重要具体情况。在 jQuery 之前 1.6，.attr() 方法有时会考虑属性值检索一些属性，其中可能导致不一致的行为。作为 jQuery 1.6 中的 .prop() 方法提供了一种显式检索的方法属性值，而仅 .attr() 检索属性。

【讨论】：