2

可能重复：
将“只读”添加到 <input > (jQuery)

这太奇怪了，我希望有一个简单的解释。我正在使用 Rails，但我认为这并不重要。

我直接将 readonly 属性添加到我的项目 html 元素中，我加载页面并且输入字段的行为就像它应该的那样是只读的。页面加载后，元素如下所示：

<input class="span6" id="event_title" name="event[title]" readonly="readonly" size="30" type="text" value="test">

但是我真的很想通过jquery添加它。当我这样做时：

$('#event_title').attr(readyonly", "readonly")

页面加载后，元素如下所示：

<input class="span6" id="event_title" name="event[title]" size="30" type="text" value="test" readyonly="readonly">

但是该字段仍然是可编辑的，并且没有被只读的迹象！请帮忙....

4

7 回答 7

5

这：

$('#event_title').attr(readyonly", "readonly")

应该：

$('#event_title').prop('readonly', true);

readyonly是一个拼写错误，是使用,和..prop等属性的最佳实践。这篇文章有助于解释差异：.prop() 与 .attr()readonlyselectedchecked

于 2012-10-05T07:53:56.653 回答
3

您拼错$('#event_title').attr(readyonly", "readonly")了“readonly” - 您将“readonly”作为第一个参数 :-)

于 2012-10-05T07:54:22.080 回答
3

尝试：

$('#event_title').attr('readonly', true);

于 2012-10-05T07:54:42.817 回答
2

您输入错误：

$('#event_title').attr(readyonly", "readonly")

将其更改为：

$('#event_title').attr("readonly", "readonly")
于 2012-10-05T07:53:50.373 回答
1

尝试使用“prop”而不是“attr”

于 2012-10-05T07:53:44.533 回答
0

我遇到过类似的问题。我认为您帖子中的拼写错误只是加载页面示例正确反映了该属性。

我是否可以建议您需要问自己的问题是属性和属性之间的区别是什么。即你什么时候应该使用.attr 和.prop。

您会发现在引入 .prop 时发布了很多关于 jQuery 1.6 和 1.6.1 发布的信息。

据我了解，每个 DOM 元素与任何对象一样都具有属性和属性。旧的 .attr 显然没有将当前的 .attr 和 .prop 分开。

在我的情况下，我认为你的情况是这样，当遇到布尔属性时，这具有特别的意义——所以检查、选择、禁用、只读是布尔属性，即可以是真或假。我发现这些存在的财产特别重要！

因为即使属性以空值存在，布尔属性也可以说是真的。

所以 readonly 可以设置为 true

<input readonly>或<input readonly="">或<input readonly="readonly">

因此在 jquery 中使用 .attr 来控制只读可能会导致意外结果，因此要打开和关闭使用只读 

$('#event_title').prop("readyonly", true);
$('#event_title').prop("readyonly", false);

当心你可能想说

$('#event_title').removeProp("readyonly");

关闭。但这将是错误的，因为如果应用于本机属性，例如选择或选中或禁用（直到刷新页面），您将无法切换回来。所以只有在你真的想删除它时才使用删除。

于 2012-10-05T09:34:18.917 回答
-1

那应该工作：

   $('#event_title').attr("readyonly", "readonly");

还要留意控制台，是否有任何 JS 错误？

于 2012-10-05T07:54:07.950 回答