html - 已禁用的 <option> 在 iOS 上仍然可选择

Question

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

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

即:

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

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

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

My site is here (您必须在桌面上调整宽度 < 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 选择选项。