jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<span class="input-group-addon"><i class="glyphicon glyphicon-book"></i></span>

                    <select id="TipoDocumento" name="TipoDocumento" class="form-control" required>
                        <option data-tipo=""></option>
                        <option data-tipo="Biomédico">Biomédico</option>
                        <option data-tipo="Dentista">Dentista</option>
                        <option data-tipo="Médico">Médico</option>
                        <option data-tipo="Farmacêutico">Farmacêutico</option>
                        <option data-tipo="Enfermeiro">Enfermeiro</option>
                        <option data-tipo="Acadêmico">Acadêmico</option>
                        <option data-tipo="Outros">Outros</option>
                        <option data-tipo="nao">Não sou da Areá da Saúde</option>
                        </select>
                        <span id="InputsDocumento">
                         <input class="form-control" type="hidden" name="CRO" id="Biomédico" placeholder="Digite seu CRO" disabled>
                         <input class="form-control" type="hidden" name="CRO" id="Dentista" placeholder="Digite seu CRO" disabled>
                         <input class="form-control" type="hidden" name="CRO" id="Médico" placeholder="Digite seu CRO" disabled>
                         <input class="form-control" type="hidden" name="CRO" id="Farmacêutico" placeholder="Digite seu CRO" disabled>
                         <input class="form-control" type="hidden" name="CRO" id="Enfermeiro" placeholder="Digite seu CRO" disabled>
                         <input class="form-control" type="hidden" name="Acadêmico" id="Acadêmico" placeholder="Digite seu RG" disabled>
                         <input class="form-control" type="hidden" name="outros" id="Outros" placeholder="Digite seu CRO" disabled>
                         <input class="form-control" type="hidden" name="CRO" id="Não sou da Areá da Saúde" placeholder="CPF" disabled>
                       ...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

//desabilita e esconde todos os inputs do campo area de atuação
  $('#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');
         
         
      //mostra/nãom mostra o estado
      switch($('#TipoDocumento').val()) {
      	case "Acadêmico":
        case "Outros":
        case "Não sou da Areá da Saúde":          
			    $("#estado").hide();
        	break;
        default:
        	$("#estado").show();
          break;
      }
   });