在不禁用字段的情况下限制选择 SELECT 选项

Posted 2023-03-04

【中文标题】在不禁用字段的情况下限制选择 SELECT 选项

【英文标题】：Restrict selection of SELECT option without disabling the field

【发布时间】：2010-09-07 19:36:05

【问题描述】：

我有一个多选 SELECT 字段，我不希望最终用户能够更改其值。

出于 UI 原因，我希望能够在不使用 disabled="true" 属性的情况下执行此操作。我尝试使用 onmousedown、onfocus、onclick 并将每个设置为模糊或返回 false，但没有成功。

这是可以做到的还是我正在尝试做不可能的事情？

【参考方案1】：

你能用onchange 事件来做吗？

<select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex">

【参考方案2】：

最好的办法是换掉选择框中的选项。如果你在那个框中只有一个答案，那么它是否可点击都没关系。

但是，我会尝试寻找另一种方法来执行此操作，因为这似乎会让用户感到沮丧。想象一下这个用户场景：

“看，一个选项选择框。” 点击 “嗯，为什么没用？” 点击 点击！ “这个蠢东西坏了，我再也不会回来了。”

如果您将选择替换为 html 文本，它可以实现相同的目标。对于大多数主要的 javascript 框架来说，这是一项相当简单的任务。

【参考方案3】：

我知道你提到你不想这样做，但我实际上认为使用disabled 属性是一个更好的解决方案：

<select multiple="multiple">
    <option value="volvo" selected="true" disabled="disabled">Volvo</option>
    <option value="saab" disabled="disabled">Saab</option>
    <option value="opel" disabled="disabled">Opel</option>
    <option value="audi" disabled="disabled">Audi</option>
</select>

如有必要，您可以随时为 select 提供 class 并使用 CSS 设置样式。无论脚本功能如何，此解决方案都适用于所有浏览器。

【讨论】：

嗯，在 IE7 中似乎不起作用。我仍然可以选择它们。在 Firefox 中它们被禁用。

该死的 IE。我想知道是否有特定于 MS 的等效于 disabled="disabled"？也许 readonly="readonly"？

不，没有。他们在 ie8 rc2 FIRST TIME 中实现了 HTML4 disabled 属性

【参考方案4】：

@Jack & @17 of 26，好点，但最终用户会期望选择框被禁用，因此混淆不应该成为问题。

我应该更清楚为什么我不能禁用控件。

将使用它的应用程序需要禁用选项的选择，并且要求“锁定”控件仍保持正常表单控件的外观。

【参考方案5】：

试试这个触发器。

<select multiple onchange="this.selectedIndex=this.selectedIndex">
<option>1</option>
<option>2</option>
</select>

【参考方案6】：

CSS3 最近新增了一个 95% compatible，它适用于除 Opera Mini 之外的所有当前浏览器，称为 pointer-events。简而言之，您可以“禁用”SELECT 或任何其他元素上的默认操作，并且仍然能够对其执行特定事件...

您可以在enter link description here 上查看 Chris Coyier 的文章。

这是否更接近您正在寻找的内容...抱歉，我无法提供任何自己的编码示例...