如何使用jquery使下拉列表只读？

我使用下面的语句使其只读，但它不起作用

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

---

我不想将其禁用，我想将其设置为只读。

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

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

下拉列表始终为只读。你能做的就是把它禁用

---

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

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

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

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

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

---

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

---

这是一篇老文章，但我想提醒人们，谁会找到它。 小心使用按名称获取元素的禁用属性。奇怪，但似乎不太管用

这不起作用：

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

函数onChangeFullpageCheckbox（）{
$（'name=img_size'）.attr（“禁用”）、$（“#整页”）.attr（“选中”）；

这项工作：

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

函数onChangeFullpageCheckbox（）{
$（'img_size'）.attr（“禁用”）、$（'fullpage”）.attr（“选中”）；

是的，我知道我最好使用prop而不是attr，但至少现在prop不会工作，因为jquery的旧版本，现在我不能更新它，不要问为什么。。。 html差异仅添加了id:

200px
300px
400px
500px
600像素
800像素
900像素
1024px

我在脚本中没有发现任何错误，在名为的版本中，console中没有错误。当然，这可能是我在代码中的错误

查看：Win 7 Pro上的Chrome 26

---

抱歉语法不好。

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

---

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

为了简化问题，这里有一个jQuery插件，它可以轻松地完成这项工作：

这行使用

readonly

属性只读进行选择：

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

尝试在“按键向上”时生成空字符串
Html是：

//使用空字符串在键合后生成

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（文档）.ready（函数（$）{
var$dropDown=$（“#我的选择”），
name=$dropDown.prop（'name'），
$form=$dropDown.parent（'form'）；
$dropDown.data（'original-name'，name）；//将名称存储在数据属性中
$（'#toggle'）。打开（'click'，函数（事件）{
如果（$dropDown.is（'.disabled'））{
//启用它
$form.find（'input[type=“hidden”][name='+name+']'）。remove（）；//删除隐藏字段（如果有）
$dropDown.removeClass（'disabled'）//删除禁用类
.道具({
姓名:姓名,，
禁用：false
})；//恢复名称并启用
}否则{
//禁用它
变量$hiddenInput=$（''{
键入：“隐藏”，
姓名:姓名,，
值：$dropDown.val（）
});
$form.append（$hiddenInput）；//从下拉字段中附加具有相同名称和值的隐藏字段
$dropDown.addClass（'disabled'）//禁用类
.道具({
“名称”：名称+“\u 1”，
残疾人士：对
})；//更改名称并解散
}
});
})；

/*可选*/
选择。禁用{
颜色：灰色文本；
}

A.
B
C


切换enable/disable（启用/禁用）

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

尝试此方法..不禁用所选值

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

---

这对我很有用。

这就是你要找的：

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

很有魅力。

效果很好

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

---

使用此选项，我可以看到选项，但无法选择它

设置禁用了

的元素

将不会提交数据，但是

选择

元素没有

只读

您可以在

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

结果:

//于2018年8月更新，以防止使用制表符更改值
$（'a'）。在（'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'））；
});
})；

选择[只读]{
背景：#eee；
指针事件：无；
触摸动作：无；
}

例1
例2
例3

也许你可以这样试试

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

---

这将下拉列表的第一个值设置为默认值，并且似乎是只读的

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

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

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

html5支持：

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

---

`

通过简单的jquery删除未选择的选项

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

---

以下是建议使用disabled的其他答案的一个细微变化。由于“disabled”属性实际上可以有任何值，但仍然是disabled，您可以将其设置为readonly，如disabled=“readonly”。这将导致

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

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

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

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

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

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