【问题标题】：How to make a dropdown readonly using jquery?如何使用 jquery 使下拉列表只读？
【发布时间】：2011-11-11 21:42:56
【问题描述】：

我正在使用以下语句将其设为只读，但它不起作用。

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

我不想让它禁用，我想让它只读。

【问题讨论】：

只读下拉菜单和标准下拉菜单有什么区别？
Setting a control to readonly using jquery 1.6 .prop() 的可能重复项
这真的是 jQuery 问题吗？或者也许下拉列表不适用于只读属性？
Kanishka Panamaldeniya 已经给了你正确的答案（应该让它成为答案而不是评论）。
下拉菜单并不总是只读的。只读意味着你可以看到它的值但不能改变它。

标签： jquery

【解决方案1】：

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

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

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

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

【讨论】：

好主意！要在当前版本的 jQuery 中使用最佳实践，我会使用 prop 方法来设置 disabled 值。即$('option:not(:selected)').prop('disabled', true);
这是一个非常机智的解决方案！
是的！好主意。
这应该是第一个答案。
或者删除 $('option:not(:selected)').remove();

【解决方案2】：

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

下拉菜单总是只读的。你能做的就是禁用它

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

【讨论】：

禁用下拉菜单不会提交。我会试试你的解决方案。
禁用选择（下拉）的一个问题是在某些浏览器（例如 IE9）中失去焦点。如果在处理 ajax 调用时选择元素被禁用，这可能是一个问题，例如，因为用户在表单中的位置丢失。
感谢您的建议。只是一个问题；如何将下拉值存储在隐藏字段中？你有一些示例代码吗？
另一种“解决方法”是在提交表单之前启用这些字段。或者在我以 JSON 格式发送数据的情况下（启用、获取数据、再次禁用）： var disabled = $(yourform).find(':input:disabled').removeAttr('disabled'); var data = getFormJSONData($(yourform)); disabled.attr('禁用', '禁用');
你现在应该使用prop()。

【解决方案3】：

这就是你要找的：

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

像魅力一样工作。

【讨论】：

很好的答案，但要注意这仍然允许选择选项卡。您还需要设置tabindex="-1"
伟人，我需要这个，因为禁用未映射到模型感谢您的回答。
非常感谢！感谢您的帮助:)

【解决方案4】：

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

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

【讨论】：

也是我的解决方案。总比禁用它们好。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

More info

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>

【讨论】：

【解决方案7】：

试试这个..不要禁用所选值..

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

它对我有用..

【讨论】：

与您的回答相同，我删除了其他选项 $('#cf_1268591 option:not(:selected)').remove();

【解决方案8】：

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

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

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

【讨论】：

【解决方案9】：

使用disabled 设置元素不会提交数据，但是select 元素没有readonly。

您可以在 select 上模拟 readonly，使用 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>

【讨论】：

非常酷的方法，但用户仍然可以使用键盘上的 TAB 来选择一个值。
@RicardoMartins 谢谢，更新了答案以防止使用 TAB 进行更改

【解决方案10】：

效果很好

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

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

【讨论】：

【解决方案11】：

这是一篇旧文章，但我想警告那些会发现它的人。小心使用按名称获取元素的禁用属性。奇怪，但似乎不太好用。

这不起作用：

<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，但至少现在prop由于旧版本的jquery而无法工作，现在我无法更新它，不要问为什么...... 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

抱歉语法错误。

【讨论】：

【解决方案12】：

为了简化事情，这里有一个 jQuery 插件，可以轻松做到这一点：https://github.com/haggen/readonly

【讨论】：

很棒的（小）sn-p 代码，谢谢。它禁用下拉菜单，因此无法更改它们，但仍允许提交它们的值。非常有用。

【解决方案13】：

这一行使带有readonly 属性的选择只读：

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

【讨论】：

【解决方案14】：

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

【讨论】：

【解决方案15】：

此代码将首先在每个下拉菜单中存储原始选择。然后，如果用户更改选择，它会将下拉菜单重置为其原始选择。

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

【讨论】：

【解决方案16】：

我发现，更好的方法是使用 CSS 删除指针事件并修改下拉菜单的不透明度（尝试 0.5）。这让用户觉得它正常被禁用，但仍会发布数据。

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

【讨论】：

您能详细说明执行此操作所需的 CSS 吗？

【解决方案17】：

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

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

http://jsfiddle.net/4aHcD/

【讨论】：

如果当前选择的选项不是列表中的第一个，如本例所示：jsfiddle.net/4aHcD/19
@Homer，该代码旨在在任何更改后重置它，并且它在这种情况下起作用。如果您希望它最初运行而不是出于某种原因自己更改初始值，您始终可以在声明事件后调用元素上的更改事件，使用$("select").change()，就像jsfiddle.net/4aHcD/20
第一次加载页面时，如果选择了第三项并且用户尝试将其更改为第二项，则您的代码会将选择更改为第一项。我认为它不应该那样做。这是我认为 OP 想要的示例，一个不会根据用户交互更改其选定值的下拉列表：jsfiddle.net/4aHcD/22
我需要什么以及 OP 要求什么是一种使其只读的方法。这意味着您可以看到选定的一个或多个值，但不能更改它。这意味着显示器模仿可编辑控件的外观，但无法对其进行编辑。

【解决方案18】：

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

// 在 keyup 后使用空字符串制作

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

【讨论】：

【解决方案19】：

也许你可以试试这个方法

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

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

【讨论】：

【解决方案20】：

html5支持：

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

`

【讨论】：

【解决方案21】：

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

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

如果您希望将数据包含在提交中，请使用隐藏字段或在提交前启用，如其他答案中所述。

【讨论】：