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

Question

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

因为optgroup在 iOS 上渲染得非常糟糕，我一直在使用禁用选项和连字符来分组一些子菜单。

IE：

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

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

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

我的网站在这里（您必须在桌面上将宽度调整为 < 700px，但需要 iOS 才能选择禁用的元素）

Answer 1

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

<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 选择选项。