如何使用 jQuery 创建只读输入？

小开

只需添加以下属性

// 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()以外，上面的代码的工作原理完全相同。

小开

也许可以禁用属性:

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

或者只使用 label 标签: ;)

<label>

小开

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

小开

使输入只读使用:

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

使其具有读/写功能:

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

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

小开

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

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

小开

在 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 ()后来被添加为更具语义性，并且它在诸如“勾选”和“选中”这样的无值属性上工作得更好。

建议如果您使用的是 JQuery 的后续版本，那么您应该尽可能使用. prop ()。

小开

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

ReadOnly 的例子:

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

或者通过不同的条款，比如

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

在这里，我们使用状态布尔值根据复选框单击来设置和删除输入中的 readonly 属性。

小开

也许加上这一点也是有意义的

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

可以用作切换选项。

小开

你可以通过简单的标记 disabled或者 enabled来做到这一点。你可以使用下面的代码来做到这一点:

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


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

或者

$(’# fieldName’) . prop (‘ readonly’，true) ;

$(’# fieldName’) . prop (‘ readonly’，false) ;

用道具比用武器更好。

小开

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

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

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

而且成功了。

小开

使用此示例创建文本框 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>

小开

给-

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

这个工作-(jquery 1.7.1)

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

使用 readOnly 和 readOnly 进行测试——两者都有效。

小开

有两个属性，即 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;

与 jQuery 1.6一起引入的 PS prop。