我正在使用以下语句将其设置为只读，但无法正常工作。

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

我不想禁用它，我想使其只读。

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

下拉菜单始终是只读的。你可以做的就是禁用它

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

我遇到了同样的问题，我的解决方案是禁用所有未选中的选项。使用jQuery非常简单：

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

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

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

尝试此一项..而不禁用所选值。

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

这个对我有用..

这是您要寻找的：

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

奇迹般有效。

将设置为disabled不会提交数据，但是select则没有readonly。

你可以模拟readonly在select使用CSS样式和JS防止改变与标签：

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>

我会禁用该字段。然后，在提交表单时，使其不被禁用。我认为，这比处理隐藏字段要容易。

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

简单的jQuery删除未选中的选项。

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

为简化起见，这里有一个jQuery插件，可轻松完成此任务：https : //github.com/haggen/readonly

此行使具有readonly属性的选择为只读：

$('select[readonly=readonly] option:not(:selected)').prop('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);
});

对我来说，最简单的选择是将select设为只读并添加：

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

您无需编写任何额外的逻辑。没有隐藏的输入或已禁用，然后在表单提交时重新启用。

这是一篇老文章，但我想警告会发现它的人。小心禁用带有名称的元素的属性。奇怪，但似乎不太有效。

这不起作用：

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

是的，我知道我最好使用prop而不是attr，但至少由于旧版本的jquery，prop现在不起作用，现在我无法更新它，不要问为什么... html差异仅添加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()" />

...

我在脚本中没有发现任何错误，在带有名称的版本中，控制台中没有错误。但是当然这可能是我在代码中的错误

看到日期：Win 7 Pro上的Chrome 26

对不起，语法不好。

我发现，一种更好的方法是使用CSS删除指针事件并修改下拉列表的不透明度（尝试0.5）。这使用户看起来它是正常禁用的，但仍然发布数据。

当然，这存在一些向后兼容的问题，但在我看来，这比解决烦人的禁用/只读问题更好的选择。

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

工作很好

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

这样，我可以看到选项，但无法选择

没有只读下拉列表。每次更改后，您可以手动将其重置为第一个值。

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

http://jsfiddle.net/4aHcD/

尝试在“按键”时制作空字符串

该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",
});

//使用空字符串在keyup之后进行

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

也许你可以这样尝试

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

这会将下拉菜单的第一个值设置为默认值，并且看起来是只读的

html5支持：

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

`

这与建议使用禁用的其他答案略有不同。由于“ disabled”属性实际上可以具有任何值并且仍然禁用，因此您可以将其设置为readonly，例如disabled =“ readonly”。这将像往常一样禁用该控件，并且还允许您使用CSS像常规禁用的控件一样轻松地设置其样式，例如：

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

如果要提交的数据包括在内，请使用隐藏字段或在提交前启用，如其他答案所述。

正如@Kanishka所说，如果我们禁用一个form元素，它将不会被提交。我已经为这个问题创建了一个片段。禁用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>