Enable fields in Jquery

Asked

Viewed 47 times

1

I have the following fields:

<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 that only the first field is enabled.

I need you to fill in some data in the field first, enable the others.

How to do this?

jquery

2 answers

5


Use the function .on() to define the desired events, in our case keyup (check if a key has been pressed, when the key goes up) and change (check if the field value has changed), then use the function .prop() to manipulate property disabled of their fields

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

  • In this case you have to fill and click out to enable the fields, wanted to fill in already enable...

  • I get it, when it’s empty you want it to turn off again?

  • 1

    That’s right! It’s empty, disable.

  • How I could qualify to fill only numbers in these fields?

  • http://www.maisumpixel.com.br/categoria/jquery/somente-numeros-em-campo-input

  • set his type to number, I’ll put in the answer with a field like number, but in that case it will also be necessary to verify the .change(), You can click on the value exchange arrows

Show 1 more comment

2

It can be done like this, from a common class to the inputs, in the example I used classeteste, and can use a code similar to that: 

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

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.