Se você rouba a ideia de alguém e diz que é sua, você roubou duas vezes: a pessoa e a sua dignidade! - Daniel Godri Jr.

Desabilitando opções de um select dinâmicamente

05 de Dezembro de 2011
Várias vezes precisamos utilizar uma opção dependente de outra opção, principalmente quando a interação com o usuário é extensa. Hoje vamos mostrar como desabilitar a opção de um select a partir de um outro select, utilizando apenas uma função Javascript simples. 

Script

A situação a seguir mostra a adição de um compromisso em uma agenda. Eu não posso deixar que o usuário cadastre o fim de um compromisso, antes de cadastrar o horário inicial. 

Teremos o seguinte: 
Hora Inicial:
<select name="hora" id="hora" onchange="habilitaHora(this.value)" class="datahora" type="select-one" value="8:00"> 
<option value="8:00">8:00</option> 
<option value="9:00">9:00</option> 
<option value="10:00">10:00</option> 
<option value="11:00">11:00</option> 
<option value="12:00">12:00</option> 
<option value="13:00">13:00</option> 
<option value="14:00">14:00</option> 
<option value="15:00">15:00</option> 
<option value="16:00">16:00</option> 
<option value="17:00">17:00</option> 
</select>


Hora Final:
<select name="hora2" id="hora2" class="datahora" type="select-one" value="8:00"> 
<option value="8:00">8:00</option> 
<option value="9:00">9:00</option> 
<option value="10:00">10:00</option> 
<option value="11:00">11:00</option> 
<option value="12:00">12:00</option> 
<option value="13:00">13:00</option> 
<option value="14:00">14:00</option> 
<option value="15:00">15:00</option> 
<option value="16:00">16:00</option> 
<option value="17:00">17:00</option> 
></select>

É claro que você poderá montar seus próprios valores, mas usarei este mais fácil para focarmos o código a seguir, um javascript totalmente comentado, que deixa habilitado no "hora2", somente os horários posteriores ao do selecionado em "hora".
 
function habilitaHora(horaAtual){
   // SETA A VARIAVEL horario COM O OBJETO hora2 UTILIZANDO O ID
   horario = document.getElementById('hora2'); 

   // IREMOS UTILIZAR ESTA VARIAVEL POSTERIORMENTE
   marcado = false; 

   // ESTE FOR VAI PERCORRER TODOS OS VALORES DA hora2
   for(i=0;i<=horario.options.length;i++){ 

      // ESTE IF VERIFICA SE O VALOR SELECIONADO NO PRIMEIRO COMBO É 
      // MENOR OU IGUAL AO ITEM DO SEGUNDO 
      if(horario.options[i].value <= horaAtual){ 

         // SE O VALOR FOR MENOR, A OPÇÃO É DESABILITADA 
         horario.options[i].disabled = true; 
      }else{ 

         // SE O VALOR FOR MAIOR, A OPÇÃO É HABILITADA 
         // FAÇO ESTA VERIFICAÇÃO NOVAMENTE CASO O USUÁRIO MUDE DE 
         // OPNIÃO E ESCOLHA UM HORÁRIO MENOR 
         horario.options[i].disabled = false; 
         
         // SE A VARIAVEL MARCADO FOR FALSA QUER DIZER QUE É O PRIMEIRO VALOR 
         // QUE PODE SER MARCADO PELO USUÁRIO. ENTÃO EU JOGO O FOCO PARA ELE 
         // E A VARIAVEL MARCADO PARA VERDADEIRO 
         if(marcado == false){ 
            horario.options[i].selected = true; 
            marcado = true;
         } 
      } 
   }
}

 
Não sei se consegui explicar claramente então estou aberto a comentários e e-mails, fiquem à vontade. Abraço a todos.


2 Comentários

Antônio Antônio disse... Estou montando uma tabela de horario (escala de trabalho),
encontrei uma dificuldade de desabilitar mais de uma opção, isso ainda não consegui, e também efetivar a desabilitação de opção do horário em mais de um funcionário.
Até o momento só consegui desabilitar o horário selecionado por um funcionário a todos os outros funcionários, mas quando coloco um outro funcionário (um segundo horário) não desabilita, o que fazer?
Olha o código:

Bem, não sei até o momento como desabilitar dois horários sendo cada funcionário em um.
Data: 29/10/2015 12:17
Henrique Corrêa Henrique Corrêa disse... Antônio,

Você está no caminho certo.
Só analise melhor o código e conseguirá!

Envie grandes trechos de código por e-mail por favor.

Até mais
Data: 29/10/2015 13:04

Deixe seu comentário

Seu e-mail não será exibido.
Receba as Novidades

Para receber as últimas novidades e promoções do site, digite seu e-mail e clique em enviar.

Arquivo do Blog