<option disabled="disabled"> en IE6+

31/Dic/2008 10658

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. rib [#]

    Доброго времени суток!
    Правильная, вкусная, полезная и нужная новость для тех, кто хочет порадовать свою семью, друзей или коллег!
    В личной жизни всегда встречаются моменты, когда нужно удивить и порадовать свою девушку и провести с ней отличный и незабываемый вечер.
    А для семейной жизни просто необходимы вылазки из монотонной и обыденной жизни, тем более это очень важно и интересно для детей.
    Для всех этих моментов отлично подходит, какой ни будь ресторан с полезной и вкусной едой, да еще там должна быть детская комната, что бы детишки забавно и весело провели время и не мешали родителям.
    А если вы работаете в продуктивном и дружном коллективе, то для снятия эмоционального и рабочего стресса, так же подойдет оригинальный и красивый ресторан.
    Вы, наверное, спросите меня, что я все хожу вокруг да около. Все довольно просто, сам недавно узнал об отличном и оригинальном ресторане ШАТО ВИНТАЖ в Санкт-Петербурге.
    Красивый и оригинальный интерьер, спокойная и веселая музыка, незабываемое и вкусное меню. Представляете, 350 сортов пива и 80 наименований вин.
    В общем, если вы хотите найти, вкусный ресторан, семейный ресторан, ресторан для свадьбы и т.д., например:
    ресторан банкетный зал
    Тогда вам нужно прямо сейчас перейти на сайт ШАТО ВИНТАЖ и узнать все подробности по поводу новогоднего корпоратива в ресторане, банкетного ресторана, ресторана с детской комнатой, самого лучшего ресторана, ресторана для корпоратива, юбилея в ресторане и т.д. https://chateauvintage.rest/ .
    Обязательно запишите и внесите в закладки название сайта и номера телефонов.
    Всем пока!

  2. Sueblabs [#]

    stromectol ivermectin 3 mg

  3. Donaldbap [#]

    http://edviagralove.com/# buy viagra onoine
    what works as good as viagra

  4. is ivermectin over the counter [#]

    Hello! I could have sworn I’ve visited this blog before but after looking at some of the articles I realized it’s
    new to me. Nonetheless, I’m definitely delighted I stumbled upon it and I’ll be bookmarking it and checking
    back often! http://harmonyhomesltd.com/Ivermectinum-side-effects.html

  5. GustavoVet [#]

    college admission essay help
    service agreement

  6. Donaldbap [#]

    http://edviagralove.com/# slang for viagra
    buy viagra soft tabs

  7. Donaldbap [#]

    http://edviagralove.com/# where can buy viagra
    levitra vs viagra cost

  8. ZobleCoall [#]

    localthe reactions to stromectol
    szampan stromectol generic
    stromectol not fda approved for lice
    – ivermectin dosage scabies
    http://stromectoloverthecounter.com/# – stromectol patient education
    sibireva stromectol 3 mg generic

CSSLab