CODEWITHSUNDEEP
jquery
seoppc
seoppc

Reputation: 2824

live change on input

I am trying to disable the next input boxes if the first input box is not empty, using jQuery:

<input name = "mrp" id="mrp" type = "text" />
<input name = "miw" class="mmw" type = "text" />
<input name = "maw" class="mmw" type = "text" />

JavaScript code:

$(document).ready(function() {
        $('#mrp').blur(function() {     //i have even tried with live('change')
               var mrp = $(this).val();
               if(mrp != '' || mrp != ' '){
                 $('.mmw').attr("disabled", "disabled");   
               }
               else if(mrp == '' || mrp == ' '){
                   $('.mmw').removeAttr("disabled");
               }
               else{
                  $('.mmw').removeAttr("disabled");
               }
        });
});

It disables the next input boxes fine, but when I clear the first text box, it doesn't remove the disabled attribute.

Upvotes: 0

Views: 6209

Answers (2)

thecodeparadox
thecodeparadox

Reputation: 87073

I use keyup event for example, you may use blur or keyup blur both.

$('input[name=mrp]').keyup(function() {
    if ($.trim(this.value).length) {
        $(this).nextAll('input.mmw').prop('disabled', true);
    } else $(this).nextAll('input.mmw').prop('disabled', false);
});

DEMO

Upvotes: 1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382464

You have to detect when the first input is filled.

This can be done with 

$(window).ready(function() {  
    var handler = function() {
    if ($('#mrp').val().trim()!='') $('.mmw').attr("disabled", "disabled");
    else $('.mmw').removeAttr('disabled');
    };
    $('#mrp').keyup(handler).change(handler);
});​

The "lose focus" detections are generally bad because you don't expect to have to click elsewhere to see the other inputs change. That's the reason why I propose to use `keyup'.

EDIT : here's a fiddle : http://jsfiddle.net/jxgTe/

Upvotes: 3

Related Questions