blocks|key|1463249|text|目前，在jQuery+1.6.1或更高版本中，建议在设置布尔属性/属性时使用.prop()。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1463250|$("#fieldName").prop("readonly",+true);|code-block|syntax|javascript|1463251|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>$("#fieldName").prop("readonly", true);
</code></pre>


blocks|key|1463153|text|要将输入设为只读，请使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1463154|+$("#fieldName").attr('readonly','readonly');|code-block|syntax|javascript|1463155|要使其具有读/写功能，请使用：|1463156|$("#fieldName").removeAttr('readonly');|1463157|添加disabled属性不会将值与post一起发送。|offset|length|style|CODE|1463158|entityMap^0|0|0|0|0|2|8|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>To make an input readonly use:</p>

<pre><code> $("#fieldName").attr('readonly','readonly');
</code></pre>

<p>to make it read/write use:</p>

<pre><code>$("#fieldName").removeAttr('readonly');
</code></pre>

<p>adding the <code>disabled</code> attribute won't send the value with post.</p>


blocks|key|1248717|text|您可以通过简单地将其标记为disabled或enabled来完成此操作。您可以使用以下代码来执行此操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1248718|//for+disable
$('#fieldName').prop('disabled',+true);

//for+enable+
$('#fieldName').prop('disabled',+false);|code-block|syntax|javascript|1248719|或|1248720|$('#fieldName').prop('readonly'，true)；|1248721|$('#fieldName').prop('readonly'，false)；|1248722|-最好使用prop而不是attr。|1248723|entityMap^0|D|8|M|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|12|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|13|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

<p>You can do this by simply marking it <code>disabled</code> or <code>enabled</code>.  You can use this code to do this:</p>

<pre><code>//for disable
$('#fieldName').prop('disabled', true);

//for enable 
$('#fieldName').prop('disabled', false);
</code></pre>

<p>or </p>

<p>$('#fieldName').prop('readonly', true);</p>

<p>$('#fieldName').prop('readonly', false);</p>

<p>--- Its better to use prop instead of attr.</p>


blocks|key|1463547|text|使用此示例可将文本框设置为ReadOnly或不设置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1463548|<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>|code-block|syntax|javascript|1463549|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use this example to make text box ReadOnly or  Not.</p>

<pre><code>&lt;input type="textbox" class="txt" id="txt"/&gt;
&lt;input type="button" class="Btn_readOnly" value="Readonly" /&gt;
&lt;input type="button" class="Btn_notreadOnly" value="Not Readonly" /&gt;

&lt;script&gt;

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

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

&lt;/script&gt;
</code></pre>


blocks|key|1248350|text|可以禁用属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1248351|<input+disabled="disabled"+id="fieldName"+name="fieldName"+type="text"+class="text_box"+/>|code-block|syntax|javascript|1248352|或者只使用标签标签：;)|1248353|<label>|1248354|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Maybe use atribute disabled:</p>

<pre><code>&lt;input disabled="disabled" id="fieldName" name="fieldName" type="text" class="text_box" /&gt;
</code></pre>

<p>Or just use label tag: ;)</p>

<pre><code>&lt;label&gt;
</code></pre>


blocks|key|1248363|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1248364|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head &gt;
    &lt;title&gt;&lt;/title&gt;

    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;div&gt;
        &lt;input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname" /&gt;
    &lt;/div&gt;
&lt;/body&gt;

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

    });
&lt;/script&gt;
&lt;/html&gt;
</code></pre>


blocks|key|1463429|text|也许这也是有意义的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1463430|$('#fieldName').prop('readonly',false);|code-block|syntax|javascript|1463431|可用作切换选项。|1463432|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Perhaps it's meaningful to also add that </p>

<pre><code>$('#fieldName').prop('readonly',false);
</code></pre>

<p>can be used as a toggle option..</p>


blocks|key|1248742|text|在JQuery+1.12.1中，我的应用程序使用代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1248743|$('"#raisepay_id"')[0].readOnly=true;|offset|length|style|CODE|1248744|$('"#raisepay_id"')[0].readOnly=false;|1248745|而且它是有效的。|1248746|entityMap^0|0|0|11|0|0|12|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|M|$]]

<p>In JQuery 1.12.1, my application uses code:</p>

<p><code>$('"#raisepay_id"')[0].readOnly=true;</code></p>

<p><code>$('"#raisepay_id"')[0].readOnly=false;</code></p>

<p>and it works.</p>


blocks|key|1463389|text|状态(SetReadOnly)对于表单非常有用，我们可以直接将任何字段设置为setReadOnly(状态)，也可以从不同的状态设置。我更喜欢使用readOnly来设置选择器的不透明度，否则attr='disabled‘也是一样的工作方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1463390|readOnly示例：|1463391|$('input').setReadOnly(true);|code-block|syntax|javascript|1463392|或者通过不同的代码，比如|1463393|var+same+=+this.checked;
$('input').setReadOnly(same);|1463394|在这里，我们使用状态布尔值来设置和删除输入中的只读属性，这取决于单击复选框。|1463395|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>The setReadOnly(state) is very useful for forms, we can set any field to setReadOnly(state) directly or from various condition.But I prefer to use readOnly for setting opacity to the selector otherwise the attr='disabled' also worked like the same way.</p>

<p>readOnly examples:</p>

<pre><code>$('input').setReadOnly(true);
</code></pre>

<p>or through the various codition like</p>

<pre><code>var same = this.checked;
$('input').setReadOnly(same);
</code></pre>

<p>here we are using the state boolean value to set and remove readonly attribute from the input depending on a checkbox click.</p>


blocks|key|1248555|text|在html中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1248556|$('#raisepay_id').attr("readonly",+true)+

$("#raisepay_id").prop("readonly",true);|code-block|syntax|javascript|1248557|在引导程序中|1248558|$('#raisepay_id').attr("disabled",+true)+

$("#raisepay_id").prop("disabled",true);|1248559|JQuery是一个不断变化的库，有时他们会定期改进。.attr()用于从HTML标签中获取属性，虽然它功能完善，但后来添加了.prop()以使其更具语义性，并且它可以更好地处理'checked‘和'selected’这样的值较少的属性。|1248560|建议如果您使用的是较新版本的JQuery，则应尽可能使用.prop()。|1248561|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>In html </p>

<pre><code>$('#raisepay_id').attr("readonly", true) 

$("#raisepay_id").prop("readonly",true);
</code></pre>

<p>in bootstrap </p>

<pre><code>$('#raisepay_id').attr("disabled", true) 

$("#raisepay_id").prop("disabled",true);
</code></pre>

<p>JQuery is a changing library and sometimes they make regular improvements. .attr() is used to get attributes from the HTML tags, and while it is perfectly functional .prop() was added later to be more semantic and it works better with value-less attributes like 'checked' and 'selected'.</p>

<p>It is advised that if you are using a later version of JQuery you should use .prop() whenever possible.</p>


<p>I have the following input:</p>

<pre><code>  &lt;input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname"/&gt;
</code></pre>

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


How can I use jQuery to make an input readonly?

jQuery

我有以下输入：  <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname"/>如何使用jQuery在不更改元素或其值的情况下使此元素成为只读输入？

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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