Disable select option in IOS Safari

Question

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

Answer 1

Have you tried:

disabled="disabled"

...on the option element?

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

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

Answer 4

Cheat. Replace

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

with

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

and style that with

optgroup:empty { ... }

Answer 5

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();
}