Remember when IE used to misbehave with select boxes on html forms? No, I'd forgotten long ago as well. Anyway, it used to be the case that IE users could select all options in drop down lists, even the ones that had been marked as disabled.
<option disabled="disabled" value="big_one">Big One (out of stock)</option>
So, the above option could be selected in IE (but not in well behaved browsers). IE8 and later browsers no longer mess you around with forms in this way, so the problem has all but disappeared... but...
...along comes the iPhone and the problem returns, but this time it's worse! Now, on iOS devices, the disabled options can be wrongly selected, but result in no value being sent for that drop down list at all. Of course, a bit of validation will stop these empty values, but it's better for the user if you can stop them selecting the disabled options at all. What I've decided to do, is simply remove the disabled options for browsers that wrongly allow them to be selected.
var forms = {
start: function() {
// disabled options can be selected in iOS and old IE, so remove them
if ( navigator.platform.match(/^(iPhone|iPad|iPod)$/) || ($.browser.msie && parseFloat($.browser.version) < 8) ) {
$('select optgroup[disabled]').remove();
$('select option[disabled]').remove();
}
}
}
$(forms.start);
You may decide to do this server side, rather than lean on jQuery.
