在IOS Safari中禁用选择选项

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禁用select框中的某些选项。它适用于所有浏览器，但不适用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

谢谢你的帮助，米格尔

5 个解决方案

#1

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 actual iPad (iPad 1, running iOS 4.2.1, in my case) will show you the click wheel.

对于iPad来说，情况则更令人困惑。iPad模拟器会把禁用的选项变成灰色，真的让他们无法使用，就像移动Safari和桌面Safari一样。但实际的iPad(在我的例子中运行的是ipad1，运行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();
}

#2

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 innerHTML like 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>

#3

If you change your disabled option to disabled blank optgroup, it seems to give the desired result without any additional javascript needed.

如果您将已禁用的选项更改为已禁用的blank optgroup，它似乎会提供所需的结果，而不需要任何额外的javascript。

<optgroup disabled></optgroup>

As opposed to the usual

与往常不同

<option disabled></option>

#4

-1

Cheat. Replace

作弊。取代

<option value="somevalue">Label text</option>

<选项值= " somevalue> < /选项>标签文本

with

与

<optgroup label="Label text"></optgroup>

< optgroup label = "标签文本" > < / optgroup >

and style that with

和风格

optgroup:empty { ... }

optgroup:空{…}

#5

-2

Have you tried:

你有试过:

disabled="disabled"

...on the option element?

…在选择元素吗?

#1