Quem trabalha com desenvolvimento web sabe a dificuldade que é criar páginas que sejam visualizadas corretamente na maioria dos navegadores.
Dentre os navegadores utilizados hoje, sem dúvida, o mais "temido" de todos é o nosso querido Internet Explorer (em especial versão 6). É incrível como praticamente tudo dá bug nele! (E quem é desenvolvedor sabe do que estuo falando!)
Um dos problemas do qual vi alguns programadores penando para resolver foi deixar desabilitado a tag <option> de um combobox (<select>) no IE6.
Caso ainda não seja familiarizado com jQuery, sugiro uma leitura rápida deste artigo antes de prosseguirmos: Iniciando em jQuery - Validando uma caixa de texto
Feito isso, vamos a mão na massa!
Primeiramente crie o seu combobox com algumas opções, como no exemplo abaixo:
Um dos problemas do qual vi alguns programadores penando para resolver foi deixar desabilitado a tag <option> de um combobox (<select>) no IE6.
Com algumas pesquisas na internet achei esta solução em um site americano, que utiliza jQuery, e foi a maneira mais fácil de resolver o problema que encontrei (e também a que utilizou menos código para isso!).
Caso ainda não seja familiarizado com jQuery, sugiro uma leitura rápida deste artigo antes de prosseguirmos: Iniciando em jQuery - Validando uma caixa de texto
Feito isso, vamos a mão na massa!
Primeiramente crie o seu combobox com algumas opções, como no exemplo abaixo:
<select name="sel" id="sel"> <option id="1" value="1">1</option> <option id="1" value="2">2</option> <option id="3" value="3">3</option> <option id="4" value="4">4</option> </select>
Em seguida importe a lib do jQuery (lembre-se de coloca-la entre as tags <head></head>:
<script src="jquery/jquery-1.3.2.js" type="text/javascript" ></script>
Abaixo do importe da lib, coloque este código (ou crie um arquivo .js separado e importe também):
<script type="text/javascript">
$(document).ready(function()
{
$.fn.extend(
{
optionDisable:function()
{
var ths = $(this);
if(ths.attr('tagName').toLowerCase() == 'option')
{
ths.before($('<optgroup> </optgroup>').css({color:'#ccc', height:ths.height()}).attr({id:ths.attr('value'), label:ths.text()})).remove();
}
return ths;
},
optionEnable:function()
{
var ths = $(this);
var tag = ths.attr('tagName').toLowerCase();
if(tag == 'option')
{
ths.removeAttr('disabled');
}
else if(tag == 'optgroup')
{
ths.before($('<option />').attr({value:ths.attr('id')}).text(ths.attr('label'))).remove();
}
return ths;
}
});
});
</script>O trecho de código acima é o chamado plugin de jQuery. Esses plugins trabalham como se fossem uma classe ou função, ou seja, um programador escreve um código que realiza alguma coisa e disponibiliza para outros programadores.
Basicamente este plugin troca o option escolhido por um <optgroup> e utiliza css para mudar a cor dele para cinza, dando a impressão de estar desabilitado a opção.
Mas e agora, como eu escolho qual <option> quero desabilitar?
A resposta é muito simples e realizada com apenas uma linha de código, veja:
$('#sel').children(':eq(1)').optionDisable();A linha de código acima diz para deixar desabilitado a opção número 1 (eq(1)) do combobox de ID sel (#sel).
Nota: a contagem do número de opções começa em 0, portanto, desabilitando a opção 1 neste exemplo dado, estaria desabilitando a opção cujo valor é igual a 2.
Créditos do código jQuery: http://harrybailey.com/2008/11/disabling-select-options-in-internet-explorer/
Segue o link do exemplo criado para download: Clique aqui
Até a próxima!
:-)
 |
Guilherme Oliveira trabalha com desenvolvimento de software a mais de 10 anos. É técnico em informática, bacharel em ciência da computação, especialista em engenharia de software, além de ser Oracle Certified Java Programmer 6 (OCJP 6). Suas áreas preferidas são desenvolvimento web e games.
|
# by Anônimo - 5 de fevereiro de 2010 às 12:06
VLW pelo post.
Otimo blog.
# by Anônimo - 24 de setembro de 2010 às 14:24
Olá! ótimo post mas eu quero saber porque o código não funciona com combo dentro de uma tabela?
# by Guilherme - 24 de setembro de 2010 às 14:53
Olá, obrigado pelo feedback.
Não era para dar problema ao utilizar o combo dentro de uma tabela, contanto que o ID do combo seja mantido:
<select name="sel" id="sel">
Poste seu exemplo em um lugar que permita fazer download e coloque o link aqui para ver se posso ajudar.