javascript - HTML Select 元素的只读等效项

Question

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

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

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

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

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

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

我意识到我可以做以下事情

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

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

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

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

score 22 · Accepted Answer

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

</p>

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

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

score 3 · Accepted Answer

添加禁用类：

.disabled{
   color: grey;
}

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

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

2 回答 2