blocks|key|733173|text|$('#cf_1268591').attr("disabled",+true);+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|733174|下拉列表始终为只读。您所能做的就是禁用它|unstyled|733175|如果使用表单，则禁用的字段不会提交，因此请使用隐藏字段来存储禁用的下拉值|733176|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>$('#cf_1268591').attr("disabled", true); 
</code></pre>

<p>drop down is always read only . what you can do is make it disabled </p>

<p>if you work with a form , the disabled fields does not submit , so use a hidden field to store disabled dropdown value</p>


blocks|key|517189|text|这就是您要查找的内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517190|$('#cf_1268591').attr("style",+"pointer-events:+none;");|code-block|syntax|javascript|517191|就像一种护身符。|517192|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>This is what you are looking for:</p>

<pre><code>$('#cf_1268591').attr("style", "pointer-events: none;");
</code></pre>

<p>Works like a charm.</p>


blocks|key|517184|text|试试这个吧..而不禁用选定的值..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517185|$('#cf_1268591+option:not(:selected)').prop('disabled',+true);|code-block|syntax|javascript|517186|它对我很有效..|517187|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>Try this one.. without disabling the selected value..</p>

<pre><code>$('#cf_1268591 option:not(:selected)').prop('disabled', true);
</code></pre>

<p>It works for me..</p>


blocks|key|733470|text|我会禁用这个字段。然后，当表单提交时，使其不被禁用。在我看来，这比处理隐藏字段要容易得多。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|733471|//disable+the+field
$("#myFieldID").prop(+"disabled",+true+);+++++++++++

//right+before+the+form+submits,+we+re-enable+the+fields,+to+make+them+submit.
$(+"#myFormID"+).submit(function(+event+)+{
++++$("#myFieldID").prop(+"disabled",+false+);
});+++++|code-block|syntax|javascript|733472|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>I'd make the field disabled.  Then, when the form submits, make it not disabled.  In my opinion, this is easier than having to deal with hidden fields.</p>

<pre><code>//disable the field
$("#myFieldID").prop( "disabled", true );           

//right before the form submits, we re-enable the fields, to make them submit.
$( "#myFormID" ).submit(function( event ) {
    $("#myFieldID").prop( "disabled", false );
});     
</code></pre>


blocks|key|517276|text|使用disabled设置元素不会提交数据，但是select元素没有readonly。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|517277|您可以在select上使用CSS设置样式并使用JS模拟readonly，以防止使用tab进行更改：|517278|select[readonly]+{
++background:+#eee;
++pointer-events:+none;
++touch-action:+none;
}|code-block|syntax|javascript|517279|然后像这样使用它：|517280|var+readonly_select+=+$('select');
$(readonly_select).attr('readonly',+true).attr('data-original-value',+$(readonly_select).val()).on('change',+function(i)+{
++++$(i.target).val($(this).attr('data-original-value'));
});|517281|结果：|517282|​|517283|++//+Updated+08/2018+to+prevent+changing+value+with+tab
$('a').on('click',+function()+{
var+readonly_select+=+$('select');
$(readonly_select).attr('readonly',+true).attr('data-original-value',+$(readonly_select).val()).on('change',+function(i)+{
	$(i.target).val($(this).attr('data-original-value'));
});
});|517284|select[readonly]+{
++background:+#eee;
++pointer-events:+none;
++touch-action:+none;
}|517285|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a+href="#">Click+here+to+enable+readonly</a>
<select>
<option>Example+1</option>
<option+selected>Example+2</option>
<option>Example+3</option>
</select>|517286|517287|entityMap^0|2|8|N|6|X|8|0|4|6|R|8|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1G|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1I|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1J|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|J|7|1L|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|J|7|1M|8|@]|D|@]|E|$K|L]]|$1|10|3|T|5|6|7|1N|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|12|$]]

<p>Setting an element with <code>disabled</code> will not submit the data, however <code>select</code> elements don't have <code>readonly</code>.</p>

<p>You can simulate a <code>readonly</code> on <code>select</code> using CSS for styling and JS to prevent change with tab:</p>

<pre><code>select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}
</code></pre>

<p>Then use it like:</p>

<pre><code>var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
    $(i.target).val($(this).attr('data-original-value'));
});
</code></pre>

<p>Result:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>  // Updated 08/2018 to prevent changing value with tab
$('a').on('click', function() {
var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
	$(i.target).val($(this).attr('data-original-value'));
});
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;a href="#"&gt;Click here to enable readonly&lt;/a&gt;
&lt;select&gt;
&lt;option&gt;Example 1&lt;/option&gt;
&lt;option selected&gt;Example 2&lt;/option&gt;
&lt;option&gt;Example 3&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|517479|text|简单的jquery来删除未选中的选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517480|$('#your_dropdown_id+option:not(:selected)').remove();|code-block|syntax|javascript|517481|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>Simple jquery to remove not selected options.</p>

<pre><code>$('#your_dropdown_id option:not(:selected)').remove();
</code></pre>


blocks|key|516978|text|为了简单起见，这里有一个jQuery插件，它可以很轻松地做到这一点：https://github.com/haggen/readonly|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|516979|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/haggen/readonly^0|Y|Y|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>To simplify things here's a jQuery plugin that does that without the hassle: <a href="https://github.com/haggen/readonly" rel="noreferrer">https://github.com/haggen/readonly</a></p>


blocks|key|733416|text|此行将readonly属性的selects设为只读：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|733417|$('select[readonly=readonly]+option:not(:selected)').prop('disabled',+true);|code-block|syntax|javascript|733418|entityMap^0|3|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>This line makes selects with the <code>readonly</code> attribute read-only:</p>

<pre><code>$('select[readonly=readonly] option:not(:selected)').prop('disabled', true);
</code></pre>


blocks|key|517412|text|对我来说，最简单的选择是将select设为只读，然后添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517413|onmousedown="return+false"+onkeydown="return+false"|code-block|syntax|javascript|517414|你不需要写任何额外的逻辑。无隐藏输入或禁用，然后在表单提交时重新启用。|517415|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>Easiest option for me was to make select as readonly and add: </p>

<pre><code>onmousedown="return false" onkeydown="return false"
</code></pre>

<p>You don't need to write any extra logic. No hidden inputs or disabled and then re-enabled on form submit.</p>


blocks|key|516774|text|此代码将首先存储每个下拉列表中的原始选择。然后，如果用户更改了选择，它会将下拉菜单重置为其原始选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|516775|http://jsfiddle.net/4aHcD/22/|offset|length|516776|//store+the+original+selection
$("select+:selected").each(function(){
++++$(this).parent().data("default",+this);
});

//change+the+selction+back+to+the+original
$("select").change(function(e)+{
++++$($(this).data("default")).prop("selected",+true);
});|code-block|syntax|javascript|516777|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|T|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>This code will first store the original selection on each dropdown. Then if the user changes the selection it will reset the dropdown to its original selection.</p>

<p><a href="http://jsfiddle.net/4aHcD/22/" rel="nofollow">http://jsfiddle.net/4aHcD/22/</a></p>

<pre><code>//store the original selection
$("select :selected").each(function(){
    $(this).parent().data("default", this);
});

//change the selction back to the original
$("select").change(function(e) {
    $($(this).data("default")).prop("selected", true);
});
</code></pre>


blocks|key|517221|text|它工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517222|$('#cf_1268591+option:not(:selected)').prop('disabled',+true);|code-block|syntax|javascript|517223|这样，我可以看到选项，但不能选择它|517224|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>It´s work very well</p>

<pre><code>$('#cf_1268591 option:not(:selected)').prop('disabled', true);
</code></pre>

<p>With this I can see the options but I can't select it</p>


blocks|key|733306|text|这是一篇古老的文章，但我想提醒那些会找到它的人。注意使用名称为got元素的disabled属性。这很奇怪，但似乎不是很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|733307|这不起作用：|733308|<script+language="JavaScript">
function+onChangeFullpageCheckbox()+{++++
$('name=img_size').attr("disabled",$("#fullpage").attr("checked"));
</script>|code-block|syntax|javascript|733309|这项工作：|733310|<script+language="JavaScript">
function+onChangeFullpageCheckbox()+{++++
$('#img_size').attr("disabled",$("#fullpage").attr("checked"));
</script>|733311|是的，我知道我最好使用prop而不是attr，但至少现在prop不能工作了，因为jquery的旧版本，现在我不能更新它，不要问为什么……html差异只是添加了id：...|733312|<select+name="img_size"+class="dropDown"+id="img_size">
<option+value="200">200px
</option><option+value="300">300px
</option><option+value="400">400px
</option><option+value="500">500px
</option><option+value="600"+selected="">600px
</option><option+value="800">800px
</option><option+value="900">900px
</option><option+value="1024">1024px
</option></select>

<input+type="checkbox"+name="fullpage"+id="fullpage"+onChange="onChangeFullpageCheckbox()"+/>|733313|..。|733314|我没有发现脚本中有任何错误，在有名称的版本中，控制台中没有错误。但当然，这可能是我在代码中的错误|733315|显示在:+Win+7+Pro上的Chrome+26|733316|很抱歉我的语法不好。|733317|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

<p>It is an old article, but i want to warn people who will find it.
Be careful with disabled attribute with got element by name. Strange but it seems not too work.</p>

<p>this do not work:</p>

<pre><code>&lt;script language="JavaScript"&gt;
function onChangeFullpageCheckbox() {    
$('name=img_size').attr("disabled",$("#fullpage").attr("checked"));
&lt;/script&gt;
</code></pre>

<p>this work:</p>

<pre><code>&lt;script language="JavaScript"&gt;
function onChangeFullpageCheckbox() {    
$('#img_size').attr("disabled",$("#fullpage").attr("checked"));
&lt;/script&gt;
</code></pre>

<p>Yes, i know that i better should use prop and not attr, but at least now prop will not work because of old version of jquery, and now i cant update it, dont ask why...
html difference is only added id:
...</p>

<pre><code>&lt;select name="img_size" class="dropDown" id="img_size"&gt;
&lt;option value="200"&gt;200px
&lt;/option&gt;&lt;option value="300"&gt;300px
&lt;/option&gt;&lt;option value="400"&gt;400px
&lt;/option&gt;&lt;option value="500"&gt;500px
&lt;/option&gt;&lt;option value="600" selected=""&gt;600px
&lt;/option&gt;&lt;option value="800"&gt;800px
&lt;/option&gt;&lt;option value="900"&gt;900px
&lt;/option&gt;&lt;option value="1024"&gt;1024px
&lt;/option&gt;&lt;/select&gt;

&lt;input type="checkbox" name="fullpage" id="fullpage" onChange="onChangeFullpageCheckbox()" /&gt;
</code></pre>

<p>...</p>

<p>I have not found any mistakes in the script, and in the version with name, there was no errors in console. But ofcourse it can be my mistake in code</p>

<p>Seen on: Chrome 26 on Win 7 Pro</p>

<p>Sorry for bad grammar.</p>


blocks|key|733352|text|我发现，更好的方法是使用CSS删除指针事件并修改下拉列表的不透明度(尝试0.5)。这为用户提供了这样的外观:它被正常禁用，但仍会发布数据。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|733353|诚然，这在向后兼容性方面有一些问题，但在我看来，这是一个比绕过恼人的禁用/只读问题更好的选择。|733354|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>I've found, a better way to do this is to use CSS to remove pointer-events and modify the opacity on the drop down (try 0.5). This gives the appearance to the user that it is disabled as normal, but still posts data.</p>

<p>Granted this has some issues with backwards compatibility, but is in my opinion a better option than getting around the annoying disabled/readonly issue.</p>


blocks|key|517128|text|正如@Kanishka所说，如果我们禁用一个表单元素，它将不会被提交。我已经为这个问题创建了一个代码片段。当select元素被禁用时，它会创建一个隐藏的输入字段并存储值。当它被启用时，它会删除创建的隐藏输入字段。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517129|More+info|offset|length|517130|​|517131|jQuery(document).ready(function($)+{
++var+$dropDown+=+$('#my-select'),
++++name+=+$dropDown.prop('name'),
++++$form+=+$dropDown.parent('form');

++$dropDown.data('original-name',+name);+//store+the+name+in+the+data+attribute+

++$('#toggle').on('click',+function(event)+{
++++if+($dropDown.is('.disabled'))+{
++++++//enable+it+
++++++$form.find('input[type="hidden"][name='+%2B+name+%2B+']').remove();+//+remove+the+hidden+fields+if+any
++++++$dropDown.removeClass('disabled')+//remove+disable+class+
++++++++.prop({
++++++++++name:+name,
++++++++++disabled:+false
++++++++});+//restore+the+name+and+enable+
++++}+else+{
++++++//disable+it+
++++++var+$hiddenInput+=+$('<input/>',+{
++++++++type:+'hidden',
++++++++name:+name,
++++++++value:+$dropDown.val()
++++++});
++++++$form.append($hiddenInput);+//append+the+hidden+field+with+same+name+and+value+from+the+dropdown+field+
++++++$dropDown.addClass('disabled')+//disable+class
++++++++.prop({
++++++++++'name':+name+%2B+"_1",
++++++++++disabled:+true
++++++++});+//change+name+and+disbale+
++++}
++});
});|code-block|syntax|javascript|517132|/*Optional*/

select.disabled+{
++color:+graytext;
}|517133|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form+action="#"+name="my-form">
++<select+id="my-select"+name="alpha">
++++<option+value="A">A</option>
++++<option+value="B">B</option>
++++<option+value="C">C</option>
++</select>
</form>
<br/>
<button+id="toggle">toggle+enable/disable</button>|517134|517135|entityMap|0|LINK|mutability|MUTABLE|url|https://amiyasahu.github.io/make-dropdown-readonly.html^0|0|0|9|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]]|A|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|O|3|P|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|Q|3|G|5|6|7|18|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>As @Kanishka said , if we disable a form element it will not be submitted . 
I have created a snippet for this problem . When the select element is disabled it creates a hidden input field and store the value . When it is enabled it delete the created hidden input fields . </p>

<p><a href="https://amiyasahu.github.io/make-dropdown-readonly.html" rel="nofollow noreferrer">More info</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($) {
  var $dropDown = $('#my-select'),
    name = $dropDown.prop('name'),
    $form = $dropDown.parent('form');

  $dropDown.data('original-name', name); //store the name in the data attribute 

  $('#toggle').on('click', function(event) {
    if ($dropDown.is('.disabled')) {
      //enable it 
      $form.find('input[type="hidden"][name=' + name + ']').remove(); // remove the hidden fields if any
      $dropDown.removeClass('disabled') //remove disable class 
        .prop({
          name: name,
          disabled: false
        }); //restore the name and enable 
    } else {
      //disable it 
      var $hiddenInput = $('&lt;input/&gt;', {
        type: 'hidden',
        name: name,
        value: $dropDown.val()
      });
      $form.append($hiddenInput); //append the hidden field with same name and value from the dropdown field 
      $dropDown.addClass('disabled') //disable class
        .prop({
          'name': name + "_1",
          disabled: true
        }); //change name and disbale 
    }
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/*Optional*/

select.disabled {
  color: graytext;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;form action="#" name="my-form"&gt;
  &lt;select id="my-select" name="alpha"&gt;
    &lt;option value="A"&gt;A&lt;/option&gt;
    &lt;option value="B"&gt;B&lt;/option&gt;
    &lt;option value="C"&gt;C&lt;/option&gt;
  &lt;/select&gt;
&lt;/form&gt;
&lt;br/&gt;
&lt;button id="toggle"&gt;toggle enable/disable&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|733554|text|您也可以禁用它，并在执行submit调用时启用它。我认为这是最简单的方法:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|733555|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>You could also disable it and at the moment that you make the submit call enable it. I think is the easiest way :)</p>


blocks|key|516675|text|不存在只读下拉菜单。您可以在每次更改后手动将其重置为第一个值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|516676|$("select").change(function(event)+{
++++$(this).val($(this).find("option").first().val());
});|code-block|syntax|javascript|516677|http://jsfiddle.net/4aHcD/|offset|length|516678|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>There is no such thing as a read-only drop-down. What you could do is reset it to the first value manually after each change.</p>

<pre><code>$("select").change(function(event) {
    $(this).val($(this).find("option").first().val());
});
</code></pre>

<p><a href="http://jsfiddle.net/4aHcD/" rel="nofollow">http://jsfiddle.net/4aHcD/</a></p>


blocks|key|733737|text|也许你可以试试这种方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|733738|function+myFunction()
{
+++$("select[id%5E=myID]").attr("disabled",+true);
+++var+txtSelect+=+$("select[id%5E=myID]+option[selected]").text();
}|code-block|syntax|javascript|733739|这会将下拉列表的第一个值设置为默认值，并且它看起来是只读的|733740|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>Maybe you can try this way</p>

<pre><code>function myFunction()
{
   $("select[id^=myID]").attr("disabled", true);
   var txtSelect = $("select[id^=myID] option[selected]").text();
}
</code></pre>

<p>This sets the first value of the drop-down as the default and it seems readonly</p>


blocks|key|517442|text|html5支持：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517443|`
+++++$("#cCity").attr("disabled",+"disabled");+
+++++$("#cCity").addClass('not-allow');|code-block|syntax|javascript|517444|`|517445|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>html5 supporting :   </p>

<pre><code>`
     $("#cCity").attr("disabled", "disabled"); 
     $("#cCity").addClass('not-allow');
</code></pre>

<p>`</p>


blocks|key|517537|text|以下是建议使用disabled的其他答案的细微变化。由于"disabled“属性实际上可以具有任何值并仍然禁用，因此可以将其设置为readonly，如disabled="readonly”。这将像往常一样禁用控件，并允许您轻松地使用与常规禁用控件不同的样式，使用CSS，如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517538|select[disabled=readonly]+{
++++....+styles+you+like+for+read-only
}|code-block|syntax|javascript|517539|如果要将数据包括在提交中，请使用隐藏字段或在提交前启用，如其他答案中所述。|517540|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>Here is a slight variation on the other answers that suggest using disabled. Since the "disabled" attribute can actually have any value and still disable, you can set it to readonly, like disabled="readonly". This will disable the control as usual, and will also allow you to easily style it differently than regular disabled controls, with CSS like:</p>

<pre><code>select[disabled=readonly] {
    .... styles you like for read-only
}
</code></pre>

<p>If you want data to be included submit, use hidden fields or enable before submit, as detailed in the other answers.</p>


<p>I am using the following statement to make it readonly but it is not working. </p>

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

<p>I don't want make it disabled, I want to make it readonly.</p>


How to make a dropdown readonly using jquery?

jQuery

我使用以下语句将其设为只读，但它不起作用。$('#cf_1268591').attr("readonly", "readonly"); 我不想禁用它，我想让它成为只读的。

问如何使用jquery使dropdown变为只读？
EN

回答 19

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery使dropdown变为只读？EN

回答 19

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery使dropdown变为只读？
EN