Briconsejo: <option> desactivados en IE
Internet Explorer no soporta el atributo DISABLED en los elementos OPTION de una etiqueta SELECT. Cosas de la política que tiene Microsoft acerca de los estándares. Firefox y Safari, en cambio, sí lo soportan.
Se puede hacer un apaño para simular el comportamiento del atributo DISABLED en IE. Para ello utilizamos código CSS própio de IE (behavior) , y un comentario condicional para ocultarlo al resto:
-
…
-
<!–[if IE]>
-
-
<style> optgroup { behavior: url("optgroup-with-disabled-options.htc"); } option { behavior: url("disabled-option.htc"); } </style>< ![endif]–>
-
…
Esto llama a dos ficheros .htc, que contienen código javascript a ejecutar sobre cada elemento OPTGROUP y OPTION de nuestro html.
disabled-option.htc:
-
<public> <script> if (element.disabled && element.parentNode.nodeName!="OPTGROUP") { var label = element.innerHTML; var optgroup = document.createElement("<optgroup label=\’" + label + "\’ style=\’color:graytext; font-style:normal;\’/>"); element.parentNode.replaceChild(optgroup,element); } </script> </public>
Se ejecuta sobre cada elemento OPTION, y lo sustituye por un OPTGROUP vacío, que en IE tiene un comportamiento similar al de un elemento desactivado.
optgroup-with-disabled-options.htc:
-
<public> <script> // check whether it contains a disabled option: for (var i=0; i<element .childNodes.length; ++i) { if (element.childNodes[i].nodeName=="OPTION" && element.childNodes[i].disabled) { // move all options one level up, adding non-breakable // spaces to indent and converting disabled options: var parent = element.parentNode; var insertionPoint = element.nextSibling; for (var i=element.childNodes.length-1; i>=0; –i) { var option = element.childNodes[i]; if (option.nodeName=="OPTION") { var label = option.innerHTML; if (option.disabled) { element.removeChild(option); option = document.createElement("<optgroup label=\’ " +label +"\’ style=\’color:graytext; font-style:normal;\’/>"); } else { option.firstChild.data = " "+label; } insertionPoint = parent.insertBefore(option,insertionPoint); } } break; } } </element></script> </public>
Se ejecuta sobre cada elemento OPTGROUP buscando elementos OPTION desactivados dentro, y hace lo mismo que la función anterior.
Y hasta aquí el briconsejo de hoy.
Fuente (inglés): http://archie.blogr.com/stories/57864/
