禁用 <option> 在 iOS 上仍然可以选择答案

【问题标题】：Disabled <option> still selectable on iOS禁用 <option> 在 iOS 上仍然可以选择
【发布时间】：2014-07-25 19:03:26
【问题描述】：

我使用select 作为移动设备的导航菜单。

因为optgroup 在 iOS 上的渲染效果很差，我一直在使用禁用选项和连字符来对一些子菜单进行分组。

即：

<select>
    <option value="" disabled>Menu</option>
    <option value="sub1">- Sub 1</option>
    <option value="sub2">- Sub 2</option>
</select>

正如预期的那样，无法在桌面浏览器上选择禁用的option。但在 iOS 上，您实际上可以选择它，即使它是灰色的。然后触发我的 AJAX 代码来动态更改页面内容，只会造成很大的混乱。

我可以通过在我的 AJAX 函数中添加一些 if 检查语句来“蛮力”取消此操作，但我真的想知道为什么禁用的元素首先在 iOS Safari 上是可选的？

My site is here（您必须在桌面上将宽度调整为

【问题讨论】：

Disable select option in IOS Safari的可能重复
我遇到了同样的问题。然而，它似乎只适用于 Mobile Safari 8.0 及更高版本。它在 iphone 6 和 5 上的 Mobile Safari 7.0 和 6.0 中按预期工作。你能想出一个解决方案吗？

标签： html ios responsive-design mobile-safari

【解决方案1】：

除了禁用该选项外，我还通过将display: none; 添加到标签中的样式属性来使其工作。

<option value="12000">$12,000</option>
<option value="15000">$15,000</option>
<option disabled="" style="display: none;" value="20000">$20,000</option>
<option disabled="" style="display: none;" value="25000">$25,000</option>

我并不是说这是最佳选择，但它使 iOS Safari 无法选择选项。

【讨论】：