如何向 <input> 添加“只读”属性？答案

【问题标题】：How to add a “readonly” attribute to an <input>?如何向 <input> 添加“只读”属性？
【发布时间】：2010-11-21 08:36:59
【问题描述】：

如何将readonly 添加到特定的<input>？ .attr('readonly') 不起作用。

【问题讨论】：

.attr('readonly', true) 有效，其他无效
.attr('readonly', 'readonly') 也有效
这取决于您使用哪种 DOCTYPE。对于 HTML 4.01 DTD 来自 CMS 的答案是有效的 HTML 4.01。如果您使用 XHTML DTD，那么来自 ceejayoz 的答案是有效的 XHTML。
它不依赖于 doctype，无论是通过 HTML 还是 XML 读入的 DOM 都是一样的，并且在任何情况下 XHTML 几乎总是实际上仍然作为 HTML 而不是 XML，为了 IE 兼容性.

标签： javascript jquery

【解决方案1】：

jQuery

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

jQuery 1.9+

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

阅读更多关于difference between prop and attr

【讨论】：

你确定吗？我也这么认为，但在规格中找不到任何内容。在 validator.w3.org 使用 xhtml 1.0 strict 完美验证。
这篇文章应该改为 .prop() 而不是 .attr()，如 jQuery API 中所述：jquery.com/upgrade-guide/1.9/#attr-versus-prop-
只读属性是一个“布尔属性”——whatwg.org/specs/web-apps/current-work/#boolean-attribute 尽管名称有些误导，但值不应为“true”或“false”。虽然我认为上面的代码实际上可以工作（在 Chrome 中使用 jQuery 1.8.1 进行了测试），但对于没有经验的人来说，它可能会导致后来的混淆。此外，根据 jQuery 文档，值应该是数字或字符串，而不是布尔值。 api.jquery.com/attr/#attr2

【解决方案2】：

使用$.prop()

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

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

【讨论】：

在阅读 .prop 的 jQuery API 之后，这应该是公认的答案。我过去总是使用 .attr('readonly', 'readonly') 和 .removeAttr('readonly') ，但这似乎更正确，也使代码更清晰。
每个人都应该使用这个答案，如此处所述：jquery.com/upgrade-guide/1.9/#attr-versus-prop-
使用$.prop() 时要注意：Prop 会将只读属性设置为空白/空字符串，因此如果您有任何使用[readonly="readonly"] 的属性选择器的 CSS，那么您必须将其更改为 [readonly]（或同时包含两者）。

【解决方案3】：

Readonly 是在 html 中定义的属性，因此将其视为一个属性。

如果您希望它不可编辑，您需要在您正在使用的对象中包含类似 readonly="readonly" 的内容。如果您希望它再次可编辑，您将不会有类似 readonly='' 的内容（如果我理解正确，这不是标准）。您确实需要将整个属性删除。

因此，在使用 jquery 时添加和删除它是有意义的。

设置只读：

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

删除只读：

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

这是唯一对我有用的选择。希望对您有所帮助！

【讨论】：

【解决方案4】：

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

【讨论】：

jQuery 的 attr() 作用于 JavaScript 属性，而不是 HTML 属性，尽管名称暗示其他情况。 attr('readonly') 实际上是对 DOM Level 1 HTML 属性 readOnly 进行操作，它是一个布尔值，所以“true”更合适。但是，字符串 'readonly' 在自动转换为布尔值时也是一个真值，所以上面的方法仍然有效。
我认为您不想将属性设置为“true”。根据 jQuery 文档，.attr 值只能是字符串或数字，而不是布尔值：api.jquery.com/attr/#attr2 此外，HTML“布尔属性”只能是空字符串或属性值。我认为解决方案是使用.prop() 以避免混淆。

【解决方案5】：

我认为“禁用”不包括在 POST 上发送的输入

【讨论】：

是的。出于这个原因，我在搜索“禁用”的替代方法时发现了这个线程。
但是你可以在发送之前启用它，稍后禁用它 $(document).on('submit', "#myform", function(e) { //enable inputs return true; // 然后如果你需要再次禁用它 } 它工作我测试了它
是否允许在不使用隐藏的情况下在 POST 上发送 html 中的只读输入值？

【解决方案6】：

您可以使用 .removeAttr 禁用只读；

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

【讨论】：

【解决方案7】：

启用只读：

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

用于禁用只读

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

【讨论】：

来自api.jquery.com/attr "从 jQuery 1.6 开始，.attr() 方法为尚未设置的属性返回 undefined。检索和更改 DOM 属性，例如选中、选中或禁用状态表单元素，使用 .prop() 方法。"
该属性不应设置为字符串“true”。这可能有效，但在技术上并不正确。（见上面我以前的 cmets。）
不要使用这个建议，这里有更好的建议。 “true”设置不正确，删除也不正确。

【解决方案8】：

使用 setAttribute 属性。注意示例中如果选择 1 在文本框上应用只读属性，否则删除属性只读。

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>

【讨论】：

【解决方案9】：

检查下面的代码：

<input id="mail">

<script>

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

</script>

【讨论】：

【解决方案10】：

对于 jQuery 版本

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

对于 jQuery 版本 >= 1.9：

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

【讨论】：