1

Tenho os seguintes campos:

inserir a descrição da imagem aqui

O select conterá RG e CPF. Como eu poderia fazer para que ao selecionar o CPF, o campo altere para o que tem máscara? O campo que contém máscara já tenho pronto, só preciso incluí-lo nessa alteração.

Vejam o código:

    <table border="0" width="100%">
        <tr class='linhas'>
            <td  style="padding: 5px"><input type="text" name="NomePAX[]" class="form-control" placeholder="Nome do pax" value=""></td>
            <td  style="padding: 5px">
              <select name="TipoDocumento" class="form-control">
                <option>Selecione o tipo de documento</option>
              </select>
            </td>
            <td  style="padding: 5px">
                <input type="text" name="RGPessoaAutorizada[]" class="form-control" placeholder="RG da pessoa autorizada" value="">
                 <!-- Caso escolha o CPF, desabilite o campo acima e mostre o campo abaixo -->
                 <input type="text" name="CPF[]" id="cpf" class="form-control" data-inputmask="'alias': '999.999.999-99'">
            </td>
            <td  style="padding: 5px"><button type="button" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button></td>
        </tr>
        <tr>
            <td colspan="3"><button type="button" class="adicionarCampo btn btn-primary" title="Adicionar item"><i class="fa fa-plus-square" aria-hidden="true"></i> Adicionar mais passageiros</button></td>
        </tr>
    </table>

JQuery

<script type="text/javascript">
     $(function () {
       function removeCampo() {
             $(".removerCampo").unbind("click");
             $(".removerCampo").bind("click", function () {
                if($("tr.linhas").length > 1){
                     $(this).parent().parent().remove();
                }
             });
       }
       $(".adicionarCampo").click(function () {
         if ($('.linhas').length < 15) {
             novoCampo = $("tr.linhas:first").clone();
             novoCampo.find('input[type="text"]').val("");
             novoCampo.find('select').val("");
             novoCampo.insertAfter("tr.linhas:last");
             removeCampo();
           }
       });
     });
 </script>

1 Resposta 1

1

Coloque um eventListener no seu select, desabilite os inputs irrelevantes e esconda-os. Você pode guardar informações para te ajudar na pesquisa no atributo datado HTML

$('#TipoDocumento').change(function(e) {
  let opcaoSelecionada = this.querySelector('option:checked');
  
  //desabilita e esconde todos os inputs
  let inputs = $('#InputsDocumento input');
  inputs.attr('type', 'hidden');
  inputs.attr('disabled', '');
  
  //habilita e mostra o input relevante
  let inputEscolhido = inputs.filter('#'+ opcaoSelecionada.dataset.tipo);
  inputEscolhido.attr('type', 'text');
  if (opcaoSelecionada.dataset.tipo !== 'placeholder')
     inputEscolhido.removeAttr('disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="TipoDocumento" name="TipoDocumento" class="form-control">
  <option data-tipo="placeholder">Selecione o tipo de documento</option>
  <option data-tipo="RG">RG</option>
  <option data-tipo="CPF">CPF</option>
</select>

<span id="InputsDocumento">
  <input type="text" id="placeholder" placeholder="Documento" disabled>

  <input type="hidden" name="RGPessoaAutorizada[]" id="RG" placeholder="RG da pessoa autorizada" disabled>

  <input type="hidden" name="CPF[]" id="CPF" placeholder="CPF" disabled> 
</span>

1
  • Olá user130157. Certo. Mas infelizmente não funciona quando clico em adicionar mais campos. Quando faço isso, ele só funciona no primeiro campo.
    – user24136
    Commented 5/11/2018 às 15:33

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