Disable Select Option in iOS Safari

Disable select option in IOS Safari

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

How to disable an select option in drop down list on mobile Safari

This code snippet works in all decent browsers (read: Safari, Chrome, Firefox), and I tried it successfully in IE8 too:

<select>
  <option value="1">Option one</option>
  <option value="2">Option two</option>
  <option value="3" disabled="disabled">Option 3 (should be disabled)</option>
  <option value="4">Option four</option>
  <option value="5">option five</option>
</select>

… the end result being that all the options are listed, but option three is greyed-out and can't be selected. What behaviour are you seeing? And in what browser?

EDIT: OP clarified re using mobile Safari which doesn't support the disabled attribute, so the suggestion for devices using that browser (and similar) would be to remove the option entirely.

iOS Safari Mobile disable previous & next for select input

Use html tabindex="nubmer" attribute (http://www.w3schools.com/tags/att_global_tabindex.asp)

To prevent next/previous on input or select use tabindex="-1":

<input tabindex="-1" />

UPD: I've checked http://m.lemonfree.com/ scripts and does not find anything magical about this form, see code below, that's all they have (So just try to use tabindex):

$('#PostCode_text').click(function() {
    $('#PostCode_text').val('');
});

var searchForm = new LemonFree_SearchForm();

$('#Make_select').change(function() {
    searchForm.loadVastModels(this.value, '#Model_select');
});

$('#Search_form').submit(function() {
    if (Validate.isZipCode($('#PostCode_text').val())) {
        return true;
    } else {
        alert('Please enter a 5 digit zip code');
        return false;
    }
});

Safari disabled select list, and non-disabled select list appear the same

Just set the opacity for the device width you are targeting like this:

 @media (max-width:768px) { 
   select:disabled {
      opacity: 0.5;
   }
 }

Disable wheel selector on iOS Safari?

Generally speaking you could probably preventDefault() on click and touch events on the <select>, however it's not clear how you would then make it actually usable. So, you may want to avoid using a select element at all once you detect an iOS device.

You could employ some widget collection such as this one. It can be used to implement dropdown menus or any other kind of menu, and does not open the big wheel thing on the bottom.

---

Related Topics