Posted By

localhorst on 05/16/08


Tagged

fix select ie option disable htc


Versions (?)

disable select or option in IE


 / Published in: HTML
 

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

IE can't handle [ option disabled="disabled" ] tags, so this htc will help

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

Report this snippet  

You need to login to post a comment.