Disable a select option in IE with jQuery

Posted on Wednesday April 8th, 2009 by Matt

What would we do if we didn’t have Internet Explorer to help us torture our brain ? We would risk getting bored !

It appears that in the 7th version of this browser beloved by masochists deveveloppers, we still don’t have the useful possibility of disabling an option in a ‘select’.

Hopefully, javascript (enhanced by jQuery) allows us to fix many issues of that browser we love to hate.

Here is a bit of script found on the internet that may help you if you face this problem :

$(document).ready(function(){
  // Disabled options fix for Internet Explorer
  $('select').each(function(){
    this.rejectDisabled = function(){
      if (this.options[this.selectedIndex].disabled){
        if (this.lastSelectedIndex) {
          this.selectedIndex = this.lastSelectedIndex;
        } else {
          var first_enabled = $(this).children('option:not(:disabled)').get(0);
          this.selectedIndex = first_enabled ? first_enabled.index : 0;
        }
      } else {
        this.lastSelectedIndex = this.selectedIndex;
      }
    };
    this.rejectDisabled();
    this.lastSelectedIndex = this.selectedIndex;
    $(this).children('option[disabled]').each(function(){
      $(this).css('color', '#CCC');
    });
    $(this).change(function() {
      this.rejectDisabled();
    });
  });
});

Thank you jQuery :)

Leave a Comment

Top of page
Clicky Web Analytics