如何使用 jQuery 将输入设为只读？答案

【问题标题】：How can I use jQuery to make an input readonly?如何使用 jQuery 将输入设为只读？
【发布时间】：2009-09-01 12:12:08
【问题描述】：

我有以下输入：

  <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname"/>

如何使用 jQuery 使该元素成为只读输入而不更改元素或其值？

【问题讨论】：

标签： jquery

【解决方案1】：

现在使用 jQuery 1.6.1 或更高版本，建议在设置布尔属性/属性时使用 .prop()。

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

【讨论】：

请注意，readonly 并不适用于所有输入。 [HTML 属性：只读]（参见 developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly）。我试图创建一个select，它允许显示选项，但不允许选择其他选项。 readonly 无法做到这一点。

【解决方案2】：

只需添加以下属性

// for disabled i.e. cannot highlight value or change
disabled="disabled"

// for readonly i.e. can highlight value but not change
readonly="readonly"

jQuery 对元素进行更改（在下面用disabled 替换readonly 以设置readonly 属性）。

$('#fieldName').attr("disabled","disabled")

或

$('#fieldName').attr("disabled", true)

注意：从 jQuery 1.6 开始，建议使用.prop() 而不是.attr()。除了用.attr() 替换.prop() 之外，上述代码的工作方式完全相同。

【讨论】：

禁用字段与使其不可编辑不同，对吧？禁用它也不会提交
@Dave 正确。只读输入也可以聚焦，禁用输入不能

【解决方案3】：

要将输入设为只读，请使用：

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

让它读/写使用：

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

添加disabled 属性不会通过post 发送值。

【讨论】：

【解决方案4】：

有两个属性，即readonly 和disabled，可以进行半只读输入。但它们之间有细微的差别。

<input type="text" readonly />
<input type="text" disabled />

readonly 属性会禁用您的输入文本，并且用户无法再更改它。
disabled 属性不仅会使您的输入文本禁用（不可更改）而且无法提交。

jQuery方法（一）：

$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);

jQuery方法（二）：

$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");

JavaScript 方法：

document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;

PS prop 与jQuery 1.6 一起介绍。

【讨论】：

【解决方案5】：

您只需将其标记为disabled 或enabled 即可。您可以使用此代码执行此操作：

//for disable
$('#fieldName').prop('disabled', true);

//for enable 
$('#fieldName').prop('disabled', false);

或

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

$('#fieldName').prop('readonly', false);

--- 最好用 prop 代替 attr。

【讨论】：

禁用的输入不会在表单 post/get 上提交。

【解决方案6】：

使用此示例将文本框设为 ReadOnly 或 Not。

<input type="textbox" class="txt" id="txt"/>
<input type="button" class="Btn_readOnly" value="Readonly" />
<input type="button" class="Btn_notreadOnly" value="Not Readonly" />

<script>

    $(document).ready(function(){
       ('.Btn_readOnly').click(function(){
           $("#txt").prop("readonly", true);
       });

       ('.Btn_notreadOnly').click(function(){
           $("#txt").prop("readonly", false);
       });
    });

</script>

【讨论】：

【解决方案7】：

给定-

<input name="foo" type="text" value="foo" readonly />

这行得通 - (jquery 1.7.1)

$('input[name="foo"]').prop('readonly', true);

用 readonly 和 readOnly 测试 - 都有效。

【讨论】：

【解决方案8】：

也许使用禁用属性：

<input disabled="disabled" id="fieldName" name="fieldName" type="text" class="text_box" />

或者只使用标签标签：;)

<label>

【讨论】：

问题是“使用 jQuery”（这意味着它应该动态完成）和“只读”（与禁用不同）。

【解决方案9】：

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>
<body>
    <div>
        <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname" />
    </div>
</body>

<script type="text/javascript">
    $(function()
    {
        $('#fieldName').attr('disabled', 'disabled');

    });
</script>
</html>

【讨论】：

【解决方案10】：

也许加上那个也很有意义

$('#fieldName').prop('readonly',false);

可以用作切换选项..

【讨论】：

我在 jQuery 3.3.1 中尝试过，它只是简单地为元素添加了一个 readonly 属性，而不管传递的值如何。因此，尽管表面上将值设置为 false，但您的示例最终会将输入字段设置为只读。

【解决方案11】：

在 JQuery 1.12.1 中，我的应用程序使用代码：

$('"#raisepay_id"')[0].readOnly=true;

$('"#raisepay_id"')[0].readOnly=false;

它有效。

【讨论】：

【解决方案12】：

setReadOnly(state) 对表单非常有用，我们可以将任何字段设置为 setReadOnly(state) 直接或从各种条件。但我更喜欢使用 readOnly 来设置选择器的不透明度，否则 attr='disabled' 也以同样的方式工作。

只读示例：

$('input').setReadOnly(true);

或通过各种编码，如

var same = this.checked;
$('input').setReadOnly(same);

这里我们使用状态布尔值来设置和删除输入中的只读属性，这取决于复选框的点击。

【讨论】：

以上示例不起作用 - setReadOnly 不是 jquery 或任何浏览器中内置的函数

【解决方案13】：

在html中

$('#raisepay_id').attr("readonly", true) 

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

在引导中

$('#raisepay_id').attr("disabled", true) 

$("#raisepay_id").prop("disabled",true);

JQuery 是一个不断变化的库，有时它们会定期进行改进。 .attr() 用于从 HTML 标签中获取属性，虽然它功能完善，但后来添加了 .prop() 以更加语义化，并且它更适用于像“checked”和“selected”这样的无值属性。

如果您使用的是更高版本的 JQuery，建议您尽可能使用 .prop()。

【讨论】：

我投了反对票，因为它是荒谬的。都是 HTML、JavaScript 和 Bootstrap 使用 jQuery，所以这个事实甚至不相关。此外，禁用和只读是两种不同的东西，它们的工作方式与是否使用 Bootstrap 无关。