Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal, bom dia!
Revirei a internet atrás de exemplos, e por incrível que pareça, todos funcionam, somente meu código que não...
Debuguei com o Firebug e ele não consegue setar a variável para o elemento que eu quero, resultando em undefined.
Tenho um form de cadastro, simples, com um select que a pessoa escolhe determinado valor, porém, se este valor for o "Outros", hailita o input ao lado.
Eu consegui fazer setando os id's ou classes, mas não queria desta forma, pois se eu tiver 10 campos iguais estes, terei que fazer 10 vezes a mesma função.
Eu queria fazer uma função só, que quando o usuário escolhesse a opção "Outros" no select tal, o próximo input habilitasse.
<div class="grid_4 alpha">
<label for="ficouSabendo">
Como ficou sabendo do evento?</label><br />
<select id="ficouSabendo" name="ficouSabendo" class="wm_w100 wm_w100Fix webID-Select">
<option value="">[selecione]</option>
<option value="Facebook">Facebook</option>
<option value="Email">Email</option>
<option value="Cartaz">Cartaz</option>
<option value="Twitter">Twitter</option>
<option value="Google Plus">Google Plus</option>
<option value="Site">Site</option>
<option value="Amigos">Amigos</option>
<option value="Outros">Outros</option>
</select>
</div>
<div class="grid_4">
<label for="ficouSabendoOutros">
Preencha se escolheu "Outros"</label><br />
<input type="text" id="ficouSabendoOutros" name="ficouSabendoOutros" value="" class="wm_w100 webID-inpTxtArea outros"/>
</div>
$('.outros').attr('disabled', true);
$('#ficouSabendo').change(function () {
var $opcao = $(this).attr('id');
if ($opcao == 'Outros' || $opcao == '' || $opcao == null) {
$(this).next('input.outros').attr('disabled', true);
} else {
$(this).next('input.outros').removeAttr('disabled');
}
});Bruno, tem sim... o input de texto tem classe "outros".
Pior que consegui fazer do jeito "simples", tipo, pega o id do select, quando tiver opção "outros" habilita o campo com id "tal", até aí beleza... o problema é que terei muitos campos desta forma em outros formulários, e não queria deixar tão identificado assim, para eu poder usar o mesmo código para todos.
Queria mais ou menos assim... quando clicar no "Select que ele está", habilita o próximo "Campo de texto que tem a classe Outros".Mas a função next() tá dando algum pau que não tô conseguindo descobrir, já revirei a Net atrás disso e muitos outros tutoriais que funcionam, e o pior, são muito simples, não tem nada muito avançado, a função next() é muito simples tbm... eu que não sei o que pega... rsrs...
Alguma idéia?
Abração e obrigado pela resposta.
Perdão, eu não havia visto a classe.
Bom, seu problema ocorre porque o seu teste lógico nunca será alcançado, fazendo o fluxo ser direcionado sempre para o else.
O campo só será desativado se o ID do menu dropdown for igual a Outros, vazio ou nulo. Só que o ID do elemento não muda (e jamais deve mudar).
Veja que se você adicionar:
alert( $opcao );
Logo abaixo da definição da variável, ao testar, não importa qual seja o item selecionado, sempre aparecerá uma janela dizendo #ficouSabendo.
Ou seja, o erro está na definição dessa variável, que ao invés de ler o ID de um elemento, deveria ler o valor atualmente selecionado do menu.:
var $opcao = $( this ).val();
Outro problema que notei foi a lógica invertida. Do jeito que está se o IF for avaliado como TRUE, o inut a ser preenchido será desabilitado. Mas pelo texto do seu <label>, deveria ocorrer o contrário. Então você deveria inverter.Por fim, jQuery.next(). Navegar pelo DOM é meio complicado.
Você está recebendo *undefined* por que está tentando localizar um input que está perto do SELECT.
Mas o não existe nenhum input "colado" ao SELECT, ele está dentro da próxima tag. O que você tem de fazer é a partir da posição do SELECT, voltar um nível e então usar o [next()](http://api.jquery.com/next).Mas ainda assim não é suficiente porque o elemento está dentro da tag. Então você deve listá-lo como um de seus filhos:
$( this ).parent().next().children('input')
Mas, como é um HTML bem simples, ao invés de toda essa navegação custosa, você ode simplesmente definir o elemento.
O código completo você pode ver aqui.
undefined, como você deve saber, significa indefinido.
Mas qual o motivo de estar indefinido? Simples! Veja os seletores que você usa: .outros e input.outros.
Agora veja seu HTML. Não existe nenhum elemento com o atributo class igual a outros, muito menos um input.
:thumbsup: