How to enable and disable an input of type text after a selected value in the combobox

Question

How to enable and disable an input of type text after a selected value in the combobox

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

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

javascript java jquery java-ee jsp

asked by anonymous 08.06.2016 / 11:01

2 answers

1

Check in the change event 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><inputtype="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

08.06.2016 / 11:23

Change Toolbar Back Button Color Several functions that will do the same thing

score 1 · Accepted Answer

Banguela,

A simpler example of what you posted 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's JSFiddle.

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