<option disabled="disabled"> en IE6+

31/dic/2008 6

Nuevamente vengo con un error de nuestro querido amigo IE6 que también es compartido por IE7 y el beta1 de IE8 (estos de Micro$oft no aprenden nunca…). Gracias a Rodrigo, me hizo notar que estos browsers no interpretan correctamente a <option> de un <select> que contenga el atributo disabled="disabled". Todos los otros navegadores buenos lo hacen perfectamente, pero lamentablemente la gran mayoría de usuarios no saben que lo que usan para navegar apesta (y no tienen culpa tampoco) y lamentablemente tenemos que encontrar soluciones a este y muchos otros problemas del desarrollo web.

Me puse a indagar por la web y encontré varias discusiones sobre qué solución es mejor que otra, y ninguna fue conclusiva. No hay solución aparente que funcione de igual manera para todos los browsers y que sea utilizada, por ejemplo, con comentarios condicionales. Básicamente me encontré con 2: una que involucra HTML pero la mejor manera de implementarlo es mediante Javascript y la segunda sencillamente con Javascript. Explicaré ambas a continuación, pero antes el HTML común que sería del tipo:

<select>
<option>Primero</option>
<option disabled="disabled">Segundo</option>
<option>Tercero</option>
</select>

Ver ejemplo (en IE notarán)

<option disabled="disabled"> entre browsers

Solución 1

Para que IE interprete la opción <option disabled="disabled">Segundo</option> como deshabilitado, debes cambiar la etiqueta <option> por <optgroup>; el problema es que <optgroup> se compone ligeramente diferente de <option> por lo que el HTML quedaría así:

<select>
<option>Primero</option>
<optgroup label="Segundo">Segundo</optgroup>
<option>Tercero</option>
</select>

Esta solución funciona perfecto en todos los browsers, por lo que puede ser hecho automáticamente mediante jQuery:

$('option:disabled').each(function(){
var texto = $(this).text();
$(this).replaceWith("<optgroup label='"+texto+"'>"+texto+"</optgroup>")
});

optgroup funcionando en IE6

Como el problema es sólo de IE, prefiero encerraro en un if() que detecte el browser como podrán apreciar en el ejemplo. Además, notarán que <optgroup> tiene una leve diferencia de estilo que <option disabled="disabled"> pero que se puede subsanar fácilmente mediante CSS.

Ver solución 1 (en IE notarán)

Solución 2

Esta solución no es una solución en sí sino un parche para el problema: ya que IE no considera el atributo disabled, entonces cada vez que el <option disabled="disabled"> sea seleccionado por el usuario (tomando en cuenta que todos los otros browsers no dejarán que sea seleccionado) la selección será automáticamente trasladada al primer <option> del <select>, vale decir del ejemplo HTML si hago click a <optgroup label="Segundo">Segundo</optgroup>, automáticamente seré redireccionado a <option>Primero</option>. El JS:

$('option:disabled').css('color','gray'); 
$('select').change(function(){
checkDisabledOptions(this);
});
function checkDisabledOptions(el){
if(el.options[el.options.selectedIndex].disabled){
el.selectedIndex = 0;
}
}

Esta solución es una mezcla entre jQuery y Javascript puro, tomada de la mejor implementación encontrada de entre 20 otras vistas; es la más simple y con menos líneas de código. Además, para esta solución es bueno siempre en el primero item del <select> la opción <option>Seleccione</option> o cualquiera que sea que no tenga un value válido (value=""), así aportamos a la accesibilidad y podremos validar ese ítem de formulario.

Ver solución 2 (en IE notarán)

Espero Rodrigo te haya servido, y gracias por hacer me ver este tema; me entretuve bastante resolviéndolo.

Links:

Comentarios

  1. Luis Anaya [#]

    Yo ya me dejaria de preocupar para el 2009 de IE 6.0, segun informan va a tener una baja de usuarios de tan solo el 20% (llamemoslos miedosos), por lo que a mediados del 2009 yo en lo personal dejare de generar estilos y js excusivos para esta version.. Seguire los pasos de las grandes empresas y pondre que porfavor visiten Microsoft.com para descargar una version mas nueva … y ya :) ! , Volviendo al punto , muy buen articulo Felicidades!!! y Feliz Año 2009

  2. OMA2k [#]

    Ya, el problema es que como dice el artículo, este problema afecta también a IE7 e incluso el nuevo IE8. ¿Alguna vez serán capaces de hacer un navegador decente?

  3. Rodrigo [#]

    Uf, si ayuda harto. Lamentablemente IE6 aún molesta la vida con estos detalles y lo mas seguro es que en otras versiones se presenten otras dificultades.

  4. Rodrigo [#]

    Bueno , por cierto muchas gracias por la preocupación

  5. FER2 [#]

    Muchas gracias por el aporte, y si a ver cuando dan un explorador decente

  6. Renzo [#]

    Hola, muy bueno el aporte, a mi parecer, no somos adivinos para saber sobre que navegador y/o version seran despleagadas nuestras paginas, asi que gracias a este aporte y mucho mas que existen uno se puede proyectar sobre que codigo es el mejor y que no se vera afectado por lo cambios de versiones, que mas da, pensar un poquito mas. Gracias por el aporte. saludos a todos.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab