Question

我有以下输入：

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

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

Answer 1

目前使用jQuery 1.6.1或更高版本时，建议在设置布尔属性/属性时使用.prop（）。

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

Answer 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()外，上述代码的工作方式完全相同。

Answer 3

要使输入只读：

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

使其可读/写使用：

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

添加disabled属性不会使用post发送值。

Answer 4

有两个属性，即readonly和disabled，它们可以构成半只读输入。但是它们之间有微小的区别。

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

readonly属性使您的输入文本被禁用，用户无法再对其进行更改。
不仅disabled属性使您的输入文本被禁用（不可更改），而且无法提交。

jQuery方法（1）：

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

jQuery方法（2）：

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

JavaScript方法：

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

PS prop与jQuery 1.6一起引入。

Answer 5

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

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

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

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

Answer 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>

Answer 7

也许禁用使用属性：

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

或者只使用label tag：;）

<label>

Answer 8

<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>

Answer 9

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

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

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

它有效。

Answer 10

给出-

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

这有效-（jquery 1.7.1）

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

经过了readonly和readOnly的测试-均有效。

Answer 11

setReadOnly（state）对表单非常有用，我们可以直接或从各种条件设置任何字段setReadOnly（state）。但我更喜欢使用readOnly将opacity设置为选择器，否则attr =＆＃39;禁用＆＃39;也是以同样的方式工作。

readOnly示例：

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

或通过像

这样的各种法典

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

这里我们使用state boolean值来设置和删除输入中的readonly属性，具体取决于复选框的点击。

Answer 12

在html中

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

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

在bootstrap中

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

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

JQuery是一个不断变化的库，有时他们会定期进行改进。 .attr（）用于从HTML标记中获取属性，虽然它是完美的功能。后来添加了.prop（）更具语义性，并且它更适用于“已检查”和“已选择”等无值属性。 / p>

建议如果您使用的是更高版本的JQuery，则应尽可能使用.prop（）。

如何使用jQuery进行只读输入？

12 个答案: