Search code examples
javascriptjqueryonchangeonselect

How to dim an input box after another input box is filling?


I have a two input box, which only one of it need to be fill and another is dim.

My problem is, I successful made input box A is filling and input box B was dimmed, but after I clear my input box A, the input box B is still dimmed.

This is my code.

$('#myCodeA').textbox( {
  onChange : function(value){
    if (value !== 'NULL'){
      $('#myCodeB').textbox({'disabled':true});
    }else{
      $('#myCodeB').textbox({'disabled':false});
    }
    }
});

$('#myCodeB').textbox( {
  onChange : function(value){
    if (value !== 'NULL'){
      $('#myCodeA').textbox({'disabled':true});
    }else{
      $('#myCodeA').textbox({'disabled':false});
    }
    }
});

I expect when the input box A is clear, input box B will undimmed, but it's remain dimmed

Sorry for my english :)


Solution

  • Use Jquery's keyup() event instead of onChange()

            $("#myCodeA").keyup(function () {
    
                if ($(this).val().length > 0) {
    
                    $("#myCodeB").prop("disabled", true);
    
    
                } else {
    
                    $("#myCodeB").prop("disabled", false);
                }
    
            });
    
    
            $("#myCodeB").keyup(function () {
    
                if ($(this).val().length > 0) {
    
                    $("#myCodeA").prop("disabled", true);
    
                } else {
    
                    $("#myCodeA").prop("disabled", false);
                }
    
            });