javascript 在 IOS Safari 中禁用选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6109085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable select option in IOS Safari
提问by Michi
I've implemented a form which needs to disable certain options in a select box using Javascript. It works fine in all browsers but not in Safari on IOS (Desktop Safari does it right).
我已经实现了一个表单，该表单需要使用 Javascript 禁用选择框中的某些选项。它适用于所有浏览器，但不适用于 IOS 上的 Safari（桌面 Safari 做得对）。
I've been looking around the web but it seems nobody had this problem so far, so I'm unsure whether it is a Safari IOS limitation or something I'm overlooking.
我一直在网上浏览，但到目前为止似乎没有人遇到过这个问题，所以我不确定这是 Safari IOS 限制还是我忽略的问题。
Thanks for any help, Miguel
感谢您的帮助，米格尔
采纳答案by Wytze
There is no alternative but to remove the disabled options when developing for iOS.
在为 iOS 开发时，别无选择，只能删除禁用的选项。
For iPhone the picture is very clear: all select list are styled as click wheels in all circumstances, and these wheels do not accept disabled options. This is shown in the iPhone Simulator as well as on the actual iPhone.
对于 iPhone，图片非常清楚：所有选择列表在所有情况下都被设计为单击轮，并且这些轮不接受禁用选项。这显示在 iPhone 模拟器以及实际的 iPhone 上。
For iPad, the picture is more confusing. The iPad simulator does grey out the disabled options and really makes them disabled, just as mobile Safari and desktop Safari do. But an actualiPad (iPad 1, running iOS 4.2.1, in my case) will show you the click wheel.
对于 iPad，图片更加混乱。iPad 模拟器确实使禁用的选项变灰并真正使它们禁用，就像移动版 Safari 和桌面版 Safari 一样。但是一个实际的iPad（iPad 1，运行 iOS 4.2.1，在我的例子中）会显示点击轮。
So do something like this early on in your script:
所以在你的脚本早期做这样的事情：
// check for ios device
nP = navigator.platform;
if (nP == "iPad" || nP == "iPhone" || nP == "iPod" || nP == "iPhone Simulator" || nP == "iPad Simulator"){
$('select option[disabled]').remove();
}
回答by DavidTaubmann
I have a solution that may be helpful for you too, and it doesn't requires jQuery...
我有一个可能对您也有帮助的解决方案，它不需要 jQuery ...
My problem was that the options were dynamically enabled and disabled, so the idea of removing the options by jQuery avoided them to be reused.
我的问题是这些选项是动态启用和禁用的，因此通过 jQuery 删除选项的想法避免了它们被重用。
So my solution was to modify the innerHTMLlike this:
所以我的解决方案是像这样修改innerHTML：
function swapAvailOpts(A, B) {
content = document.getElementById(B);
switch (A) {
case "X":
content.innerHTML = '<optgroup label="X"><option>X1</option><option>X2</option></optgroup>';
break;
case "Y":
content.innerHTML = '<optgroup label="Y"><option>Y1</option><option>Y2</option></optgroup>';
break;
default:
content.innerHTML = '<optgroup label="Z"><option>Z1</option><option>Z2</option></optgroup>';
}
}<select name="choose" onChange="swapAvailOpts(this.value,'Choices');">
<option>X</option>
<option>Y</option>
<option>Z</option>
</select>
<select name="Choices" id="Choices">
<optgroup label="X">
<option>X1</option>
<option>X2</option>
</optgroup>
</select>回答by robalvey
If you change your disabled option to disabled blank optgroup, it seems to give the desired result without any additional javascript needed.
如果您将禁用选项更改为禁用空白 optgroup，它似乎无需任何额外的 javascript 即可提供所需的结果。
<optgroup disabled></optgroup>
As opposed to the usual
与通常的相反
<option disabled></option>
回答by John Pitcairn
Cheat. Replace
欺骗。代替
<option value="somevalue">Label text</option>
<option value="somevalue">Label text</option>
with
和
<optgroup label="Label text"></optgroup>
<optgroup label="Label text"></optgroup>
and style that with
和风格
optgroup:empty {
...
}
optgroup:empty {
...
}
回答by Barbagallo
Have you tried:
你有没有尝试过：
disabled="disabled"
...on the option element?
...在选项元素上？
