1

Tenho os seguintes campos:

<label class="control-label">KM</label>
<input class="input-small" style="width: 50px !important;" type="text" name="km" value="">

<label class="control-label" style="width: 75px !important;" >Descarga</label>
<input class="input-small" style="width: 50px !important;" type="text" name="descarga" value="" disabled>

<label class="control-label" style="width: 75px !important;" >Pernoite</label>
<input class="input-small" style="width: 50px !important;" type="text" name="pernoite" value="" disabled>

<label class="control-label" style="width: 75px !important;" >Romaneio</label>
<input class="input-small" style="width: 50px !important;" type="text" name="romaneio" value="" disabled>

Note que somente o primeiro campo está habilitado.

Preciso que, ao preencher algum dado no campo primeiro, habilite os demais.

Como fazer isso?

2 Respostas 2

5

Utilize a função .on() para definir os eventos desejados, no nosso caso keyup (verificar se alguma tecla foi pressionada, quando a tecla sobe) e change (verifica se o valor do campo mudou), depois utiliza a função .prop() para manipular a propriedade disabled dos seus campos

$(function(){
  $("input[name='km']").on("keyup change", function(){
    campos = "input[name='descarga'],input[name='pernoite'],input[name='romaneio']";
    if ($(this).val()) {
      $(campos).prop({disabled:false});
    } else {
      $(campos).prop({disabled:true});
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="control-label">KM</label>
<input class="input-small" style="width: 50px !important;" type="number" name="km" value="">

<label class="control-label" style="width: 75px !important;" >Descarga</label>
<input class="input-small" style="width: 50px !important;" type="text" name="descarga" value="" disabled>

<label class="control-label" style="width: 75px !important;" >Pernoite</label>
<input class="input-small" style="width: 50px !important;" type="text" name="pernoite" value="" disabled>

<label class="control-label" style="width: 75px !important;" >Romaneio</label>
<input class="input-small" style="width: 50px !important;" type="text" name="romaneio" value="" disabled>

6
  • Neste caso tem que preencher e clicar fora para habilitar os campos, queria que ao preencher já habilitasse... Commented 20/08/2015 às 12:24
  • entendi, quando ficar vazio quer que desabilite de novo? Commented 20/08/2015 às 12:24
  • 1
    Isso mesmo! Ficou vazio, desabilita. Commented 20/08/2015 às 12:25
  • Como eu conseguiria habilitar para preencher somente números nestes campos? Commented 20/08/2015 às 12:28
  • maisumpixel.com.br/categoria/jquery/… Commented 20/08/2015 às 12:33
2

Pode ser feito assim, de uma classe em comum para os inputs, no exemplo usei classeteste, e pode usar um código parecido com esse:

$(function() { 
	$("#IDDOPRIMEIROINPUT").keyup(function(){
		if($(this).val())
			$(".classeteste").prop('disabled', false);
		else
			$(".classeteste").prop('disabled', true);
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="control-label">KM</label>
<input id="IDDOPRIMEIROINPUT" class="input-small" style="width: 50px !important;" type="text" name="km" value="">

<label class="control-label" style="width: 75px !important;" >Descarga</label>
<input class="input-small classeteste" style="width: 50px !important;" type="text" name="descarga" value="" disabled>

<label class="control-label" style="width: 75px !important;" >Pernoite</label>
<input class="input-small classeteste" style="width: 50px !important;" type="text" name="pernoite" value="" disabled>

<label class="control-label" style="width: 75px !important;" >Romaneio</label>
<input class="input-small classeteste" style="width: 50px !important;" type="text" name="romaneio" value="" disabled>

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .