Advanced Search

disable select or option in IE

/ Published in: HTML
Save to your folder(s)
IE can't handle [ option disabled="disabled" ] tags, so this htc will help

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. == HTML ================
  2.  
  3. <html>
  4. <head>
  5.   <!--[if IE]>
  6.   <style type="text/css">
  7.     select, option { behavior: url("disable.htc"); }
  8.   </style>
  9.   <![endif]-->
  10. </head>
  11. <body>
  12. <form>
  13. <select>
  14. <option>Option 1</option>
  15. <option>Option 2</option>
  16. <option disabled>Option 3</option>
  17. </select>
  18. </form>
  19. </body>
  20. </html>
  21.  
  22. == disable.htc ================
  23.  
  24. <?xml version="1.0" encoding="ISO-8859-1"?>
  25. <PUBLIC:COMPONENT LIGHTWEIGHT="true">
  26. <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="onDocumentReady()" />
  27. <PUBLIC:ATTACH EVENT="ondetach" ONEVENT="onDetach()" />
  28.  
  29. <SCRIPT type="text/javascript">
  30. //<![CDATA[
  31.  
  32. var nLastSelectedIndex;
  33. var fOnChangeOriginal;
  34.  
  35. // event handlers
  36.  
  37. function onDocumentReady() {
  38.   var sTag = element.tagName.toLowerCase();
  39.   if (sTag == "select") {
  40.     attachEvent("onchange", onChangeSelect);
  41.     attachEvent("onpropertychange", onPropertyChangeSelect);
  42.     nLastSelectedIndex = element.selectedIndex;
  43.     hackOnChange();
  44.   } else if (sTag == "option") {
  45.     attachEvent("onpropertychange", onPropertyChangeOption);
  46.     emulateOption();
  47.   }
  48. }
  49.  
  50. function onDetach() {
  51.   var sTag = element.tagName.toLowerCase();
  52.   if (sTag == "select") {
  53.     detachEvent("onchange", onChangeSelect);
  54.     detachEvent("onpropertychange", onPropertyChangeSelect);
  55.   } else if (sTag == "option") {
  56.     detachEvent("onpropertychange", onPropertyChangeOption);
  57.   }
  58. }
  59.  
  60. //
  61.  
  62. function onChangeSelect() {
  63.   if (element.options[element.selectedIndex].disabled) {
  64.     element.selectedIndex = nLastSelectedIndex;
  65.   } else {
  66.     nLastSelectedIndex = element.selectedIndex;
  67.     if (fOnChangeOriginal != undefined) {
  68.       fOnChangeOriginal();
  69.     }
  70.   }
  71. }
  72.  
  73. function onPropertyChangeSelect() {
  74.   var sChangedPropertyName = event.propertyName.toLowerCase();
  75.   if (sChangedPropertyName == "onchange") {
  76.     hackOnChange();
  77.   } else if (sChangedPropertyName == "selectedindex") { // contributed by Zecc
  78.     nLastSelectedIndex = element.selectedIndex;
  79.   }
  80. }
  81.  
  82. function onPropertyChangeOption() {
  83.   var sChangedPropertyName = event.propertyName.toLowerCase();
  84.   if (sChangedPropertyName == "disabled") {
  85.     emulateOption();
  86.   }
  87. }
  88.  
  89. // hack onChange attribute of select tag
  90.  
  91. function hackOnChange() {
  92.   detachEvent("onpropertychange", onPropertyChangeSelect);
  93.   fOnChangeOriginal = element.onchange;
  94.   element.onchange = null;
  95.   attachEvent("onpropertychange", onPropertyChangeSelect);
  96. }
  97.  
  98. // emulate disabled option
  99.  
  100. function emulateOption() {
  101.   if (element.disabled) {
  102.     element.style.color = "graytext";
  103.   } else {
  104.     element.style.color = "menutext";
  105.   }
  106. }
  107.  
  108. //]]>
  109. </SCRIPT>
  110. </PUBLIC:COMPONENT>

URL: http://apptaro.seesaa.net/article/21140090.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.