When selecting a select item, change the input field

Question

I have the following fields:

Select will contain RG and CPF. How could I do that so when selecting CPF, the field changes to what has mask? The field containing mask I already have ready, I just need to include it in that change.

Look at the code:

    <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>

Answer 1

Put a eventListener in your select, disable irrelevant inputs and hide them. You can save information to help you search for the attribute dataof 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>