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