Disable select option in 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).

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.

Thanks for any help, Miguel

回答1:

There is no alternative but to remove the disabled options when developing for 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.

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.

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...

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.

So my solution was to modify the innerHTML like this:

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.

<optgroup disabled></optgroup>

As opposed to the usual

<option disabled></option>

回答4:

Cheat. Replace

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

with

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

and style that with

optgroup:empty { ... }

回答5:

Have you tried:

disabled="disabled"

...on the option element?