根本没有只读下拉列表这种东西。您可以做的是在每次更改后手动将其重置为第一个值。

$("select").change(function(event) {
$(this).val($(this).find("option").first().val());
});

Http://jsfiddle.net/4ahcd/

$('#cf_1268591').attr("disabled", true);

下拉列表总是只读的。你能做的就是禁用它

如果使用表单，禁用的字段不会提交，因此使用隐藏字段存储禁用的下拉列表值

I had the same problem, my solution was to disable all options not selected. 使用 jQuery 非常简单:

$('option:not(:selected)').attr('disabled', true);

编辑 = > 如果在同一页面上有多个下拉列表，请如下所示禁用 select-ID 上所有未选择的选项。

$('#select_field_id option:not(:selected)').attr('disabled', true);

这段代码将首先在每个下拉列表中存储原始选择。然后，如果用户改变选择，它将重置下拉列表到其原来的选择。

Http://jsfiddle.net/4ahcd/22/

//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);
});

这是一篇旧文章，但我想提醒那些能找到它的人。 在使用按名称命名的 got 元素时，要注意禁用属性。

这种做法行不通:

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

这项工作:

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

是的，我知道我最好应该使用道具，而不是 atr，但至少现在道具不会工作，因为旧版本的 jquery，现在我不能更新它，不要问为什么..。 html difference is only added id: ...

<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()" />

...

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

Seen on: Chrome 26 on Win 7 Pro

很抱歉我语法不好。

我发现，更好的方法是使用 CSS 删除指针事件并在下拉菜单中修改不透明度(尝试0.5)。这给用户的外观是，它被正常禁用，但仍然张贴数据。

当然，这有一些向后兼容性的问题，但是在我看来，这是一个比绕过恼人的禁用/只读问题更好的选择。

为了简化问题，这里有一个 jQuery 插件，它可以轻松地完成这项工作: https://github.com/haggen/readonly

This line makes selects with the readonly attribute read-only:

$('select[readonly=readonly] option:not(:selected)').prop('disabled', true);

“ keypress up”时尝试创建空字符串

HTML 是:

<input id="cf_1268591" style="width:60px;line-height:16px;border:1px solid #ccc">

Jquery 是:

$("#cf_1268591").combobox({
url:"your url",
valueField:"id",
textField:"text",
panelWidth: "350",
panelHeight: "200",
});

//make after keyup with null string

var tb = $("#cf_1268591").combobox("textbox");
tb.bind("keyup",function(e){
this.value = "";
});

我会让这片区域失效。然后，当表单提交时，不要禁用它。在我看来，这比处理隐藏字段要容易得多。

//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 );
});

正如@Kanishka 所说，如果我们禁用一个表单元素，它将不会被提交。 我已经为这个问题创建了一个代码片段。当 select 元素被禁用时，它会创建一个隐藏的输入字段并存储该值。启用后，它会删除创建的隐藏输入字段。

更多信息

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 = $('<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 + "_1",
disabled: true
}); //change name and disbale
}
});
});

/*Optional*/


select.disabled {
color: graytext;
}

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

您也可以禁用它，并在您进行提交调用时启用它。我认为这是最简单的方法:)

尝试这一个. . 没有禁用选定的值. 。

$('#cf_1268591 option:not(:selected)').prop('disabled', true);

对我有用。

这就是你要找的:

$('#cf_1268591').attr("style", "pointer-events: none;");

非常有效。

它的工作非常好

$('#cf_1268591 option:not(:selected)').prop('disabled', true);

有了这个，我可以看到选项，但我不能选择它

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

你可以在 select上模拟 readonly，使用 CSS 来设计样式，使用 JS 来防止使用 tab 进行更改:

select[readonly] {
background: #eee;
pointer-events: none;
touch-action: none;
}

然后像这样使用它:

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'));
});

结果:

  // 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'));
});
});

select[readonly] {
background: #eee;
pointer-events: none;
touch-action: none;
}

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

也许你可以试试这条路

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

这将下拉列表的第一个值设置为默认值，它看起来是只读的

对我来说，最简单的选择是将 select 设置为 readonly 并添加:

onmousedown="return false" onkeydown="return false"

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

Html5支持:

`
$("#cCity").attr("disabled", "disabled");
$("#cCity").addClass('not-allow');

`

简单的 jquery 来删除未选择的选项。

$('#your_dropdown_id option:not(:selected)').remove();

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:

select[disabled=readonly] {
.... styles you like for read-only
}

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

我知道这是一个老话题，但我想我会回应任何其他人想要使一个选定的字段只读，而不是禁用。

选择字段不能有只读属性。我发现最好的方法是使用 CSS。

这将使 select 字段作为只读字段，同时仍然提交值。

使字段作为只读:

$("#FieldId").css({"pointer-events": "none", "touch-action": "none", "background": "#ede6e6"});

To make a field actionable:

$("#FieldId").css({"pointer-events": "auto", "touch-action": "auto", "background": "#ffffff"});

如果我有一个包含多个字段的表单，需要通过在变量中声明它，根据访问级别将其设置为只读，那么我也会使用这个函数。例如 PHP

if($UserAccess == "Limited"){
$ReadOnlyFields = "style='pointer-events:none;touch-action:none;background:#ede6e6;'";
}


<select name='TheField' <?php if(!empty($ReadOnlyFields)){echo $ReadOnlyFields;} ?>>

试试这个

$('#Dropdown').attr('readonly', true);
$('#Dropdown').css('pointer-events','none');