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

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

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>