选择禁用属性设置为“禁用”仍然允许在 Chrome 上选择选项答案

【问题标题】：Select with disabled attribute set as "disabled" still allows options to be selected on Chrome选择禁用属性设置为“禁用”仍然允许在 Chrome 上选择选项
【发布时间】：2012-12-14 18:20:49
【问题描述】：

我正在使用 Zend Framework 2 开发一个应用程序，并且我正在使用两个选择框。第一个填充了数据库中的数据，第二个是空的。

单击按钮将所选选项从 first Select 传递到 第二个（通过 Javascript）后，我设置了 disabled 属性在第一次选择时 "disabled" 以便没有其他选项可以选择并因此传递给第二次选择。

  //Whithin javascript function  
  var s = document.getElementById('firstSelect');
  s.setAttribute("disabled","disabled");

在 IE、Firefox 和 Safari 上一切正常（在将一个选项从第一个选择传递到另一个选项后，第一个选择被禁用并显示为灰色，您根本无法选择更多选项。）但 Chrome 上不行。

与所有其他浏览器一样，第一个选择是灰色的，但仍允许用户选择另一个选项并将其传递给另一个选择框。发生这种情况后，无法选择更多选项，并且其行为与所有其他浏览器一样。

任何想法为什么会发生这种情况？

【问题讨论】：

我无法重现该问题。你能提供一个完整的简化测试用例吗？ jsbin.com 上的实时版本会很有帮助。

标签： javascript google-chrome cross-browser

【解决方案1】：

其实，chrome 是对的。您正在根据 ID (getElementById) 进行选择。这些必须在您的 DOM 树中是唯一的。因此，如果您有多个具有相同 ID 的元素，Google 只会选择一个。

您现在有两个选择： - 扩展您的代码以通过 getElementsByClassname 加载元素，尽管这在 IIRC 中还没有得到很好的支持，或者使用 getElementsByTagname。这将返回一个数组，您随后可以循环并相应地设置属性 - 进入 jQuery（或任何其他框架）并让框架为您解决这个问题（大多数框架都有针对这些情况的功能；））

成功..

ps：元素 CAN 具有相同的 'name' 属性，这与 'id' 不同

【讨论】：

hm.. 也许我的问题不够清楚。我选择作为唯一 ID (id = "firstSelect")。因此，当您单击此第一个选择的选项，然后按一个按钮将其传递给另一个选择时，JS 函数会告诉此 firstSelect 现在已将 disabled 属性设置为已禁用，因此它不应允许用户选择更多选项。