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

How can I use jQuery to make an input readonly?

提问by useranon

I have the following input:

我有以下输入：

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

How can I use jQuery to make this element a read-only input without changing the element or its value?

如何在不更改元素或其值的情况下使用 jQuery 使该元素成为只读输入？

回答by Gourneau

These days with jQuery 1.6.1 or above it is recommended that .prop() be used when setting boolean attributes/properties.

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

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

回答by Russ Cam

simply add the following attribute

只需添加以下属性

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

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

jQuery to make the change to the element (substitute disabledfor readonlyin the following for setting readonlyattribute).

jQuery来进行更改到元件（替代disabled为readonly在下文中用于设置readonly属性）。

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

or

或者

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

NOTE: As of jQuery 1.6, it is recommended to use .prop()instead of .attr(). The above code will work exactly the same except substitute .attr()for .prop().

注：在jQuery 1.6中，建议使用.prop()来代替.attr()。除了替换.attr()为.prop().

回答by Reem

To make an input readonly use:

要使输入只读使用：

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

to make it read/write use:

使其读/写使用：

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

adding the disabledattribute won't send the value with post.

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

回答by pixellab

You can do this by simply marking it disabledor enabled. You can use this code to do this:

您可以通过简单地标记它disabled或来做到这一点enabled。您可以使用此代码执行此操作：

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

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

or

或者

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

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

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

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

--- Its better to use prop instead of attr.

--- 最好使用 prop 而不是 attr。

回答by Gopakumar AP

Use this example to make text box ReadOnly or 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>

回答by Elyas Hadizadeh

There are two attributes, namely readonlyand disabled, that can make a semi-read-only input. But there is a tiny difference between them.

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

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

• The readonlyattribute makes your input text disabled, and users are not able to change it anymore.
• Not only will the disabledattribute make your input-text disabled(unchangeable) but also cannot it be submitted.

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

jQuery approach (1):

jQuery 方法（一）：

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

jQuery approach (2):

jQuery 方法（二）：

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

JavaScript approach:

JavaScript 方法：

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

PS propintroduced with jQuery 1.6.

PSprop用jQuery 1.6.

回答by NAVNEET CHANDAN

Given -

鉴于 -

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

this works - (jquery 1.7.1)

这有效 - (jquery 1.7.1)

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

tested with readonly and readOnly - both worked.

使用 readonly 和 readOnly 测试 - 都有效。

回答by P.K.

In JQuery 1.12.1, my application uses code:

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

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

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

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

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

and it works.

它有效。

回答by Josh Pule

Perhaps it's meaningful to also add that

也许还补充一点是有意义的

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

can be used as a toggle option..

可以用作切换选项..

回答by IProblemFactory

Maybe use atribute disabled:

也许使用禁用的属性：

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

Or just use label tag: ;)

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

<label>