Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Kesley_Rennan

Desabilitar opção especifica do combobox

Por , em Javascript

Recommended Posts

Kesley_Rennan    0

Kesley_Rennan
Postado

Boa tarde pessoal, estou começando a estudar programação, quando me surgiu a seguinte dúvida:

Tenho dois combobox em uma página, e dependendo do que é selecionado no primeiro, desabilita opções no segundo:

Primeiro combobox:

<select class="form-control" name="tipoAtivi" id="tipoAtivi">
 <option></option>
 <option value="Mini Curso" onClick="liberarH();">Mini Curso</option>		
 <option value="Palestra" >Palestra</option>								
</select>

Segundo combobox:

<select class="form-control" name="horaInicio" id="horaInicio">
 <option></option>
 <option value="08:00" >08:00</option>		
 <option value="09:45" >09:45</option>	
 <option value="19:15" >19:15</option>
 <option value="21:00" >21:00</option>								
</select>

E fiz um javascript acionado quando é escolhido a opção Mini Curso no primeiro combobox para desabilitar duas opções de horários no segundo, porém não sei como selecionar somente as opções que desejo. Da maneira que fiz embaixo desabilita o combobox inteiro

function liberarH()
{
	var tipoAtivi = document.getElementById("tipoAtivi");	
	var horaInicio = document.getElementById("horaInicio");

	
	if(tipoAtivi.value == "Mini Curso")
	{
		document.getElementById("horaInicio").disabled = true;
	}
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Olá Kesley seja bem vindo ao forum.

 

JavaScript é uma linguagem de eventos (que os 'Objetificadores' que se mordam, mas é verdade)

 

No seu exemplo pelo q entendi você esta monitorando o evento 'click' e neste caso seria melhor monitorar o evento change.

 

Ou seja sempre q o id tipoAtivi sofrerr uma alteração a função é ativada.

 

o this equivale ao ele mesmo, acessando o seu 'próprio atributo value' logo em seguida eu verifico se o valor é equivalente aa string 'Mini Curso' e desabilito, caso contrario eu habilito (vai q é alterado neh?)

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<select class="form-control" name="tipoAtivi" id="tipoAtivi">
		<option value="">-- Selecione --</option>
		<option value="Mini Curso">Mini Curso</option>		
		<option value="Palestra" >Palestra</option>								
	</select>
	
	<br />
	
	<select class="form-control" name="horaInicio" id="horaInicio">
		<option value="">-- Selecione --</option>
		<option value="08:00" >08:00</option>		
		<option value="09:45" >09:45</option>	
		<option value="19:15" >19:15</option>
		<option value="21:00" >21:00</option>								
	</select>
	
	<script type="text/javascript">
		document.getElementById('tipoAtivi').addEventListener('change',function(){
			//alert(1);
			if(this.value == 'Mini Curso'){
				document.getElementById("horaInicio").disabled = true;
			} else {
				document.getElementById("horaInicio").disabled = false;
			}
		});
	</script>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito