2

Eu já fiz isso com o rádio button, mas estou com problemas para fazer isso a parti de um select. Ao selecionar qualquer funcionário, deve habilitar e quando seleciona que representa nenhum funcionário, irá desabilitar o botão.

<form action="questao2.php" method="post">
   <fieldset>
      <select>
        <option name="ativo" value="--" onchange="if(document.getElementById('avancar').disabled==false){document.getElementById('avancar').disabled=true}"/> --</option>
        <option name="ativo" value="FUNCIONARIO1" onchange="if(document.getElementById('avancar').disabled==true{document.getElementById('avancar').disabled=false}"/>FUNCIONÁRIO 1</option>
     </select>
 <button id="avancar" type="submit" disabled="disabled" class="btn btn-primary pull-right" >Avançar</button>

</fieldset>
</form>

<form action="teste.php" method="post">
  <fieldset> Sim ou não? <label class="radio">
      <input name="ativo" type="radio" value="SIM" onclick="if(document.getElementById('avancar').disabled==true){document.getEleme‌​ntById('avancar').disabled=false}"/>SIM</label>
    <label class="radio">
      <input name="ativo" type="radio" value="NAO" onclick="if(document.getElementById('avancar').disabled==true){document.getEleme‌​ntById('avancar').disabled=false}"/>NÃO</label>
    <button id="avancar" disabled="disabled" class="btn btn-primary pull-right" type="submit">Avançar</button>
  </fieldset>
</form> 
3
  • <form action="questao2.php" method="post"> <fieldset> <select> <option name="ativo" value="--" onchange="if(document.getElementById('avancar').disabled==false){document.getElementById('avancar').disabled=true}"/> --</option> <option name="ativo" value="FUNCIONARIO1" onchange="if(document.getElementById('avancar').disabled==true{document.getElementById('avancar').disabled=false}"/>FUNCIONÁRIO 1</option> </select> <button id="avancar" type="submit" disabled="disabled" class="btn btn-primary pull-right" >Avançar</button> </fieldset> </form> 25/06/2014 às 14:15
  • pode colocar o código do radio button? melhor do que fazer um a um é melhor criar um código mais geral que funciona para muitos elementos. Mas para isso tem de colocar o código todo relevante a esta pergunta.
    – Sergio
    25/06/2014 às 14:21
  • <form action="teste.php" method="post"> <fieldset> Sim ou não? <label class="radio"><input name="ativo" type="radio" value="SIM" onclick="if(document.getElementById('avancar').disabled==true){document.getElementById('avancar').disabled=false}"/>SIM</label> <label class="radio"><input name="ativo" type="radio" value="NAO" onclick="if(document.getElementById('avancar').disabled==true){document.getElementById('avancar').disabled=false}"/>NÃO</label> <button id="avancar" disabled="disabled" class="btn btn-primary pull-right" type="submit">Avançar</button></fieldset> </form> Obrg @Sergio 25/06/2014 às 14:29

2 Respostas 2

7

O evento onchange deve ficar no < select onchange="acao()">

Veja se isto resolve seu problema:

<!doctype html>
<html>
    <head>
    </head>
    <script type="text/javascript">
        function habilitaBtn () {
            var op = document.getElementById("opcao").value;

            if(op == "--")
            {
                if(!document.getElementById('avancar').disabled) document.getElementById('avancar').disabled=true;              
            }

            else if(op == "FUNCIONARIO1")
            {
                if(document.getElementById('avancar').disabled) document.getElementById('avancar').disabled=false;
            }
        }
    </script>
    <body>
    <form action="questao2.php" method="post">
    <fieldset>
        <select onchange="habilitaBtn()" id="opcao">
            <option name="ativo" value="--"/> --</option>
            <option name="ativo" value="FUNCIONARIO1"/>FUNCIONÁRIO 1</option>
        </select>
        <button id="avancar" type="submit" disabled="disabled" class="btn btn-primary pull-right" >Avançar</button>
    </fieldset>
    </form>
    </body>
</html>
4
  • Perfeito. Obrigado @user11795. 25/06/2014 às 14:59
  • Eu fiz uma pequena melhoria que se for igual à "--", desabilita e se for diferente de vazio, habilita. Criei um arquivo javascript. 25/06/2014 às 17:13
  • Olha isso, @Irpinheiro. function habilitaBTN() { var op = document.getElementById("opcao").value; if(op == "--") { if(!document.getElementById('avancar').disabled)document.getElementById('avancar').disabled=true; } else if (!op == "") { if(document.getElementById('avancar').disabled)document.getElementById('avancar').disabled=false; } } 25/06/2014 às 17:14
  • @fabricio_wm pelo q entendi vc só precisa desabilitar o botão quando for igual '--' então eu alterei o código, da uma olhada e vê se faz sentido pra vc. function habilitaBTN() { var op = document.getElementById("opcao").value; if(op == "--"){ if(!document.getElementById('avancar').disabled) document.getElementById('avancar').disabled=true; } else { if(document.getElementById('avancar').disabled) document.getElementById('avancar').disabled=false; } } Assim como foi dito na outra resposta é bom separar em camadas sua aplicação,separe JS,CSS e HTML.
    – lrpinheiro
    26/06/2014 às 14:04
2

Aqui fica uma sugestão, já depois de ter aceite uma das respostas.
(Link: http://jsfiddle.net/AvXws/)

var inputs = document.querySelectorAll('form select, form input');
for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('change', verificar);
}

function buscaBotao(elInicial) {

    // ir buscar o field set mais correspondente
    var fieldset = elInicial.parentElement;
    while (fieldset.tagName.toLowerCase() != 'fieldset') fieldset = fieldset.parentNode;

    // ir buscar o botao
    var botao = fieldset.getElementsByTagName('button')[0];

    // devolver o elemento
    return botao;
}

function verificar(e) {
    var el = e.target;
    var value = el.value || el.options[el.selectedIndex].value;
    var botao = buscaBotao(el);
    botao.disabled = !value;
}

Esta sugestão melhora o seu código nestes pontos:

  • retira o javascript misturado no HTML. Isso é má prática e fica dificil de perceber.
  • muda ID do botão para class, no caso de ter vários na mesma página isso daria erro.

Para ele funcionar deve colocar o javascript no final do body, ou envolvendo numa função window.onload=function(){ ...codigoaqui...};

Repare no jsFiddle que coloquei como o código fica mais limpo (HTML sem javascript no meio) e mais fácil de manter.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .