Disable Select based on another element on the Same Row

Question

In a table, I have a row with two inputs - one select and one text. What I want to achieve is that if one has a value, then the other (on the same row) should disable. This works correctly onload when there is a value in the textbox, but doesn't seem to work when there is a value in only the select box.

As you can see in the example here: http://jsfiddle.net/anAgent/UBUhn/1/ the "change" event works correctly, but it doesn't work onload .

Any help would greatly be appreciated!

I'm working with jQuery 1.5.2 and with both Google Chrome and IE9

---

Update With Final Code

Thanks @scoopseven and @eicto for your input. Based on these two answers, here's the final code. I hope it helps someone else.

$(document).ready(function() {
    $(".validation-compare").change(runRowValidation);
    $(".validation-compare").each(runRowValidation);
});

function runRowValidation() {
    var $me = $(this),
        $other = $('.validation-compare',$me.closest("tr")).not($me),
        mVal = $me.val(),
        oVal =$other.val();
   
    if(mVal != "" && oVal == "") {
       $me.removeAttr('disabled');
       $other.attr('disabled',1);        
    } else if(mVal == "" && oVal != "") {
       $other.removeAttr('disabled');
       $me.attr('disabled',1); 
    } else {
        $other.removeAttr('disabled');
        $me.removeAttr('disabled');
    }
}​

You can see it in action at: http://jsfiddle.net/anAgent/UBUhn/24/

Answer 1

var validme=function() {
    var me=$(this);
    me.removeClass('validation-compare');
    if (me.val()) {
        console.log(me);
        me.addClass('valid');
        me.parent().parent().find('.validation-compare').attr('disabled',1);
        me.addClass('validation-compare');
        return;
    }          
    me.removeClass('valid');   
    if (me.parent().parent().find('.validation-compare.valid').length<1) {

        me.parent().parent().find('.validation-compare').removeAttr('disabled'); }
    me.addClass('validation-compare');
}
    $('.validation-compare').each(validme);    
    $('.validation-compare').change(validme)

http://jsfiddle.net/UBUhn/22/

Answer 2

i don't think that you you need to set the class valid , all you have to do is replacing

var $otherInput = $('.validation-compare', $parent).not('.valid');

by

var $otherInput = $('.validation-compare', $parent).not($me);

And this will resolve your problem on onload . Here is an example

Answer 3

You need to separate out the function and call it on the click event and on page load. Something like this:

    jQuery(function($){

        function myFunction() {
            // do somestuff
        }

        // myFunction needs to be called when select is clicked and when page is loaded
        $('#someelement').click(myFunction);
        $(document).ready(myFunction);

     });