2

Tenho um select com dois option, quando eu seleciono o primeiro option quero que ele me mostre um campo input com o atributo required e quando eu selecionar o segundo option eu quero que ele faça o mesmo, só que retirando o required do primeiro input.

A função que eu criei adiciona o required no input mostrado, só que quando eu faço ele mostrar o segundo input, ele mantém o required nos dois campos.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head lang="pt-br">
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $("#campos > input").hide();
        $("#formulario").change(function(){
                $("#campos > input").hide();
                $( '#'+$( this ).val() ).show('fast').attr('required', 'required');;
        });
});
</script>
</head>
<body>

        <select name="formulario" id="formulario">
                <option value="">--</option>
                <option value="empresa">Empresa</option>
                <option value="cantidato">Cantidato</option>
        </select>

        <div id="campos">
                <input type="text" value="" placeholder="CNPJ" id="empresa">
                <input type="text" value="" placeholder="CPF" id="cantidato">
        </div>
</body>
</html>

Gostaria que o required fosse mantido apenas no input selecionado.

Grato.

2 Respostas 2

6

Podes usar o .attr() para mudar esse atributo, assim:

$('select').on('change', function() {
    $('input').attr('required', this.value == 'req');
});

O .attr() tem a seguinte API: .attr(nomeDoAtributo, valorBooleano).
Quando o segundo parametro fôr verdadeiro ele adiciona o atributo, quando fôr falso remove o atributo.

jsFiddle: https://jsfiddle.net/f0stzume/

Edit:

Vi que juntaste o teu código à pergunta. Um exemplo podia ser assim:

$(document).ready(function() {
    $('#formulario').on('change', function() {
        var tipo = this.value;
        $('#empresa, #cantidato').each(function() {
            var usar = this.id == tipo;
            this.required = usar;
            this.style.display = usar ? 'block' : 'none';
        });
    });
});

jsFiddle: https://jsfiddle.net/2rydjuns/

1
  • 1
    Olá Sergio, era exatamente o que eu precisava. Muito obrigado mesmo! 27/11/2016 às 15:38
1
$(document).ready(function() {
     $("#formulario").on('change', function() {                                                
          if(this.value == 'empresa' || this.value == 'candidato'){
               $("#empresa").attr("required", "req");
               $("#candidato").attr("required", "req");
          }else{
               $("#empresa").removeAttr('required');
               $("#candidato").removeAttr('required');
          }
     });
});

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 .