how to remove 'disabled' from input if previous input has value

Question

I've been trying some experimentation with jQuery, basically it's not working, this is my HTML:

<input class="span4" value="" id="dpd1" type="text"> <!-- Input that needs value -->
<input class="span4" value="" id="dpd2" type="text" disabled> <!-- Input which needs 'enabled' -->

and here's what I'm trying with jquery:

$('#dpd2').click( function () {
    var value = $('#dpd1').val();
    if( value.length > 0 ){
    $("#dpd2").prop('disabled', disabled); }
    });

probably shouldn't be trying to have all this happen on click, but I haven't really done anything like this in jQuery before, so not sure what way is best for this type of situation.

Any help is appreciated.

EDIT: I picked the answer which best highlighted the shortest and effective way for me to achieve the outcome I wanted. But there are some other great answers there too! Thanks!!

bugwheels94 · Accepted Answer · 2013-06-15 19:58:30Z

3

You may want to do it in the blur of first textbox,

$('#dpd1').blur(function () {
    $("#dpd2").prop('disabled', !$.trim($('#dpd1').val()).length);
});

Demo

prop takes a boolean. And when you set your textbox to disabled initially you can no longer click on it. hence use blur to perform the action once you focus out of the first textbox.Use $.trim() to remove the whitespaces from ends of the textbox value

edited Jun 15, 2013 at 19:58

bugwheels94

32.1k3 gold badges43 silver badges62 bronze badges

answered Jun 15, 2013 at 19:37

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ricki Over a year ago

Very nice, I like the size of this. Very informative. If I'm right you are using the !$('#dpd1').val().length to bring a true or false outcome?

PSL Over a year ago

Yes length if 0 means, !0 is true or else false

Ricki Over a year ago

Thanks! You've just opened up a new chapter for me. Something I had never noticed due to naivety.

adeneo · Accepted Answer · 2013-06-15 19:37:33Z

3

Use boolean values to disable / enable properties with prop() :

$('#dpd1').on('keyup', function () {
    $('#dpd2').prop('disabled', this.value.length < 1); 
});

FIDDLE

edited Jun 15, 2013 at 19:37

answered Jun 15, 2013 at 19:31

adeneo

319k29 gold badges410 silver badges392 bronze badges

8 Comments

Shomz Over a year ago

the one you just deleted... :rolleyes:

bugwheels94 Over a year ago

@Shomz that is why i deleted

adeneo Over a year ago

@Shomz - Strangely enough Ankit commented on my error before he/she fixed the same error in his/her own answer.

Shomz Over a year ago

Yeah, that's why I complained... typical lame behaviour. I like your final answer (although it's similar to mine), btw. +1

bugwheels94 Over a year ago

@Shomz yes i commented on after editing mine but deleted the answer because i was confused to choose how to show the desired effect whether attach an event to #dp1 or do something else.So it is not a lame behavior

|

Shomz · Accepted Answer · 2013-06-15 19:50:19Z

1

Yeah, click won't work here, you need to implement change handler, then check whether the value is an empty string, and if not, change the disabled property on the other input.

Something like:

$('#dpd1').change(function () {
    $("#dpd2").prop('disabled', $('#dpd1').val() == '');
});

edited Jun 15, 2013 at 19:50

answered Jun 15, 2013 at 19:32

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

4 Comments

Ricki Over a year ago

+1 for change - I really need to take my head out of PHP once in a while

Shomz Over a year ago

Yeah, change is exactly what's needed here. Like I said, keyup and blur work as well, but change covers every scenario.

Ricki Over a year ago

I used @PSL's answer but modified it with change as it seems to work better in my situation

Shomz Over a year ago

@Ricki sure, whatever works best for the situation. Just don't forget the other options in case you need them in the future.

Collectives™ on Stack Overflow

how to remove 'disabled' from input if previous input has value

3 Answers 3

Demo

3 Comments

8 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related