Enable fields in Jquery

Question

Enable fields in Jquery

Navigation

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

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

asked by anonymous 20.08.2015 / 14:09

2 answers

2

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

$(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><labelclass="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>

20.08.2015 / 14:18

Help on how to get the last word of a string and append to the beginning using java Arrays not started in C

score 5 · Accepted Answer

Use the .on() function to define the desired events, in this case keyup (check if any key was pressed, when the key goes up) and change (check if the field value changed), then use the .prop() function to manipulate the disabled property of your 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><labelclass="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>