Question

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.

Answer 1

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/