如何为<input>添加“readonly”属性？

Question

我怎样才能将readonly添加到特定的<input>中？.attr('readonly')不起作用。

- Qiao

---

.attr（'readonly'，true）有效，其他无效 - Qiao

".attr('readonly', 'readonly')" 也可以起作用。 （注：该代码是jQuery中将输入框设置为只读的一种方式。） - Qiao

这取决于您使用的DOCTYPE。对于HTML 4.01 DTD，CMS的答案是有效的HTML 4.01。如果您使用XHTML DTD，则ceejayoz的答案是有效的XHTML。 - bjoernwibben

不依赖于文档类型，DOM无论是通过HTML还是XML读取的都是相同的，在任何情况下，XHTML几乎总是作为HTML而不是XML提供，以确保IE兼容性。 - bobince

Answer 1

jQuery <1.9

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

jQuery 1.9+

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

阅读有关prop和attr之间的区别的更多信息。

- Christian C. Salvadó

---

你确定吗？我也这么认为，但规格说明中找不到任何相关内容。在xhtml 1.0 strict下，<input name="foo" readonly="readonly" value="bar" /> 在validator.w3.org上验证完美。 - Jonas Stensved

这篇文章应该改为使用.prop()而不是.attr()，正如jQuery API中所述：http://jquery.com/upgrade-guide/1.9/#attr-versus-prop- - frshca

readonly 属性是一个“布尔属性”--http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute。尽管名称有些误导，但值不应该是“true”或“false”。虽然我认为上面的代码实际上会工作（在使用jQuery 1.8.1测试过Chrome），但对于缺乏经验的人来说，这可能会导致后来的混淆。此外，根据jQuery文档，该值应该是数字或字符串，而不是布尔值。http://api.jquery.com/attr/#attr2 - Luke

Answer 2

使用$.prop()

$("#descrip").prop("readonly",true);

$("#descrip").prop("readonly",false);

- Greg

---

阅读了jQuery API的.prop部分后，这应该成为被接受的答案。我以前一直在使用.attr('readonly', 'readonly')和.removeAttr('readonly')，但这似乎更正确，也使代码更清晰。 - evan w

每个人都应该使用这个答案，就像这里所说的一样：http://jquery.com/upgrade-guide/1.9/#attr-versus-prop- - frshca

在使用 $.prop() 时需要注意：prop 会将 readonly 属性设置为空字符串，因此如果您有任何使用属性选择器 [readonly="readonly"] 的 CSS，那么您需要将其更改为 [readonly]（或同时包含两者）。 - Luke

Answer 3

Readonly是HTML中定义的属性，因此应该像对待其他属性一样对待它。

如果您不希望对象可编辑，则需要在您正在使用的对象中添加类似readonly="readonly"的内容。如果您想要再次编辑它，则不应该使用类似readonly=''的内容（如果我理解正确，这不是标准）。您确实需要完全删除该属性。

因此，在使用jQuery时，添加和删除readonly属性是有意义的。

设置只读属性：

$("#someId").attr('readonly', 'readonly');

移除只读属性：

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

这是唯一对我真正起作用的选择。希望能帮到你！

- user1310388

Answer 4

.attr('readonly', 'readonly') 应该可以解决问题。你的 .attr('readonly') 只返回值，而不是设置值。

- ceejayoz

---

jQuery的attr()方法操作的是JavaScript属性，而不是HTML属性，尽管它们的名称暗示了相反的含义。attr('readonly')实际上操作的是DOM Level 1 HTML属性readOnly，它是一个布尔值，因此‘true’更合适。但是，当自动转换为布尔值时，字符串'readonly'也是一个真值，因此上述代码仍然有效。 - bobince

我认为你不想将属性设置为“true”。根据jQuery文档，.attr值应该只是字符串或数字，而不是布尔值：http://api.jquery.com/attr/#attr2 此外，HTML的“布尔属性”应该只是空字符串或属性的值。我认为解决方案是使用.prop()来避免混淆。 - Luke

Answer 5

我认为“disabled”会排除输入内容被发送到POST。

- Pier

---

是的，我也是因为这个原因在寻找“残疾”一词的替代方案时发现了这个帖子。 - Jonas Stensved

但是你可以在发送之前启用它，稍后再禁用它 $(document).on('submit', "#myform", function(e) { //启用输入框 return true; // 如果需要，再次禁用 } 它有效，我已经测试过了。 - Geomorillo

在HTML中，只读输入值是否允许在POST请求中发送而不使用隐藏字段？ - Ajay Takur

Answer 6

您可以使用.removeAttr方法来取消readonly属性的设置。

$('#descrip').removeAttr('readonly');

- Steve

Answer 7

使用setAttribute属性。请注意，在示例中，如果选择1，则在文本框上应用readonly属性，否则删除readonly属性。 http://jsfiddle.net/baqxz7ym/2/

document.getElementById("box1").onchange = function(){
  if(document.getElementById("box1").value == 1) {
    document.getElementById("codigo").setAttribute("readonly", true);
  } else {
    document.getElementById("codigo").removeAttribute("readonly");
  }
};

<input type="text" name="codigo" id="codigo"/>

<select id="box1">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>

- Diogo Rodrigues

Answer 8

启用只读模式：

$("#descrip").attr("readonly","true");

禁用只读模式

$("#descrip").attr("readonly","");

- Pradeep

---

自jQuery 1.6起，未设置的属性使用.attr()方法返回undefined。要检索和更改表单元素的已选中、已禁用或已选中状态等DOM属性，请使用.prop()方法。 - David Clarke

该属性不应设置为字符串“true”。这可能有效，但在技术上不正确。（请参见我上面的先前评论。） - Luke

不要使用这个建议，这里有更好的选择。 "true" 不是正确的设置方式，删除也是不正确的。 - MiFiHiBye

Answer 9

请检查以下代码：

<input id="mail">

<script>

 document.getElementById('mail').readOnly = true; // makes input readonline
 document.getElementById('mail').readOnly = false; // makes input writeable again

</script>

- warpi

Answer 10

对于 jQuery 版本 < 1.9：

$('#inputId').attr('disabled', true);

对于 jQuery 版本 >= 1.9：

$('#inputId').prop('disabled', true);

- Osman Adak