Disable options in a multiple select - Javascript for IE

August 16th, 2007

Yeah, you might be amazed if you thought that just setting the option to disabled would work, even in IE7.
But it looks like it only works on proper browsers.

I searched the net everywhere to see how other people were doing it and I found this method (from: www.lattimore.id.au) to be the best one for my needs. I made some updates to it: I was using a multiple select list and also because I was creating the select box from an AJAX response. So here’s the code:

  1.  
  2. function emulateDisabled(selectBox) {
  3.  for (var i=0, option; option = selectBox.options[i]; i++) {
  4.         if (option.disabled) {
  5.                 option.style.color = "graytext";
  6.         }else{
  7.                 option.style.color = "menutext";
  8.         }
  9.  }
  10. }
  11.  
  12. function restoreEmulateDisabled(selectBox) {
  13.  for (var i=0, option; option = selectBox.options[i]; i++) {
  14.         if(option.selected && option.disabled){
  15.                 option.selected=false;
  16.         }
  17.  }
  18. }
  19.  
  20. function addEmulation(selectBox){
  21.  window.select_current = new Array();
  22.  selectBox.onfocus = function(){ window.select_current[this.id] = this.selectedIndex; }
  23.  selectBox.onchange = function(){ restoreEmulateDisabled(this); }
  24. }
  25.  

If you are generating your select element with AJAX, just call emulateDisabled(your_select_box);
on the onComplete function.
If you would like to have all your select elements to have this functionality then add this onload function:

  1.  
  2. window.onload = function() {
  3.  if (document.getElementsByTagName) {
  4.         var s = document.getElementsByTagName("select");
  5.         if (s.length > 0) {
  6.                 window.select_current = new Array();
  7.                 for (var i=0, select; select = s[i]; i++) {
  8.                         select.onfocus = function(){ window.select_current[this.id] = this.selectedIndex; }
  9.                         select.onchange = function(){ restoreEmulateDisabled(this); }
  10.                         emulateDisabled(select);
  11.                 }
  12.         }
  13.  }
  14. }
  15.  

A big thanks to the guy from lattimore.
cheers mate.

Entry Filed under: Annoyances, Crossbrowser, Firefox, Internet Explorer, Javascript

Bookmark and Share   Del.icio.us   Technorati

5 Comments Add your own

  • 1. Alistair&hellip  |  2007-08-16 at 4.34 pm

    Daniel,

    I’m really happy you found that little script useful. I wrote it initially, not as a complete solution at all but more as a proof of concept. I couldn’t believe that the most used browser in the world failed to implement such a standard piece of user interface functionality, such as being able to disable an drop down list option.

    Al.

  • 2. zirtoc&hellip  |  2007-09-12 at 3.14 pm

    This code met my needs beautifully. Stupid IE!!!

  • 3. Obfuscator&hellip  |  2008-01-21 at 6.54 am

    hm.. option just change color to gray, but not disabled

  • 4. Scott F&hellip  |  2008-04-02 at 4.31 am

    Its unreal that IE does not have this . Makes me sick.

  • 5. Select - Option disablen &hellip  |  2008-07-30 at 3.26 am

    [...] Vielen Dank für deine Hilfe - klappt ausgezeichnet! Für das Problem mit dem IE hatte ich auf Daniel Tome´s Blog ein Workaround gefunden. Nochmals Danke und freundliche Grüße, [...]

Leave a Comment

Required

Required, hidden

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackback this post  |  Subscribe to the comments via RSS Feed

Most Recent Posts