To enable and disable a text type input after a value selected in the combobox

Question

My jQuery

 < script >
   $(document).ready(function() {

     var tipo = $("#idTipoParticipante option:selected").text();


     if (tipo == 'Personagem') {

       $("#enable").click(function() {
         // habilitando o campo
         $('#personagem').attr("disabled", '');
         // retornando a cor padrao
         $('#personagem').css("background-color", "#FFF");

       });

     } else if (tipo == 'Tecnico') {
       // campo desabilitado
       $('#personagem').attr("disabled", true);
       // cor de fundo para o campo
       $('#personagem').css("background-color", "#cccccc");

     }

   }); < /script>

My Select

<select class="form-control" name="idTipoParticipante" id="idTipoParticipante">
  <% List<TipoParticipante>listTipoParticipante = tipoParticipanteController.retornarListaTipoParticipante(); for (int i = 0; i
    < listTipoParticipante.size(); i++) { %>
      <option value="<%=listTipoParticipante.get(i).getIdTipoParticipante()%>">
        <%=listTipoParticipante.get(i).getDescricaoTipoParticipante()%>
      </option>

      <% } %>
</select>

My input

<input type="text" class="form-control" id="personagem" name="personagem" placeholder="informe a personagem...">

Answer 1

Do the verification in the event change in the select field:

$('#idTipoParticipante').on('change', function() {
  var tipo = $(this).find('option:selected').text().trim();
  if(tipo == 'Personagem') {
  	$('#personagem').prop("disabled", false);
  }
  else if(tipo == 'Tecnico') {
  	$('#personagem').prop("disabled", true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" id="personagem" name="personagem" placeholder="informe a personagem...">
<select id="idTipoParticipante">
  <option></option>
  <option value="">
    Personagem
  </option>
  <option value="">
    Tecnico
  </option>  
</select>

EXAMPLE in jsfiddle

Answer 2

Toothless,

a simpler example of what you published would be:

<select class="form-control" name="idTipoParticipante" id="idTipoParticipante">
  <option value="0">Personagem</option>
  <option value="1">Tecnico</option>
</select>

<input type="text" class="form-control" id="personagem" name="personagem" placeholder="informe a personagem...">

Javascript:

$(document).ready(function() {
    $('#idTipoParticipante').change(function(){
        var tipo = $("#idTipoParticipante option:selected").text();
        if (tipo == 'Personagem') {
            $('#personagem').attr('disabled', false);
        }else if (tipo == 'Tecnico') {
            $('#personagem').attr('disabled', true);
        }
    });
});

Here it is Jsfiddle.

Basically what you should do beyond the point you once were: add an action to the $('idTipoParticipante'). So every time your idTipoParticipant is modified you can compare the values again.