HTML选择元素的只读等效项[重复]答案

【问题标题】：A readOnly Equivalent for HTML Select Elements [duplicate]HTML选择元素的只读等效项[重复]
【发布时间】：2012-08-12 03:56:23
【问题描述】：

对于 HTML 输入，是否有与 readOnly="true" 等效的 HTML 选择字段的属性或技术？

我想禁用一个表单选择字段，但在发布表单时仍会继续。如果这是一个 HTML 输入，我会做这样的事情

$('select_id').setAttribute('readOnly', 'true');

并且浏览器会将字段呈现为不可编辑，但它的值仍将传递给后端。我想要一个类似的 HTML 选择，但执行以下操作

$('#select_id').setAttribute('readOnly', 'true');

不起作用。该属性已成功添加到 DOM，但浏览器仍将其呈现为可选择的。

我意识到我可以做到以下几点

$('#input_id').disabled();

但是当一个字段被禁用时，它的值不会被传递到后端。

我想要一种方法来禁用此选择字段，但仍会传递到后端。

（示例使用 Prototype JS，但我对任何通用解决方案都感兴趣）

【问题讨论】：

【解决方案1】：

禁用除选定选项之外的所有选项：

<select>
<option disabled="disabled">1</option>
<option selected="selected">2</option>
<option disabled="disabled">3</option>
</select>

这样下拉菜单仍然有效（并提交其值），但用户无法选择其他值。

【讨论】：

【解决方案2】：

添加禁用类：

.disabled{
   color: grey;
}

如果存在类，则使用阻止默认焦点和点击，以及 dbl 点击：

$('#el').bind('click dblclick focus').function(event){
   if ($(this).hasClass('disabled')) event.preventDefault();
});

【讨论】：