Question

Ok, I’ve been coding a website for a while now and this the first “insurmountable” problem I haven’t found an aswer for, so now I’m turning to you, the experts.

On my form I have three drop-down menus, one textbox and one disabled checkbox. I want it to work so that when a user has selected an option from each drop-down menu and written something on the textbox, the checkbox becomes enabled.

I have found this code when I have been looking for a solution and it’s very similar to my problem. However, when I try to add another drop-down menu, it still enables the button when I select an option from the first menu and completely ignores the second menu. I’m sorry, I’m new to Jquery/JavaScript and I just think it should work that way when the class names are same on both menus (jQuery class selector: (‘.dropdown’)).

I have also found a similar code with textboxes. I just don’t know how to combine these codes so it would act the way I want.

Answer 1

See it here: http://jsfiddle.net/JKmkL/109/

$(document).ready(function() {
    $('.required').change(function() {
        var done=true;
        $('.required').each(function(){
            if(!$(this).val()){
                $('.myCheckBox').prop('disabled',true);
                done=false;
                return false;
            }
        });
        if(done){$('.myCheckBox').prop('disabled',false);}
    });
});

And add class required to the elements.

Edit:

The code above assumes that the default <option> has value="". If not, you can use http://jsfiddle.net/JKmkL/114/

$(document).ready(function() {
    $('.required').change(function() {
        var done=true;
        function quit(){
            $('.myCheckBox').prop('disabled',true);
            done=false;
            return false;
        }
        $('.required.dropdown').each(function(){
            if($(this).children(':selected').hasClass("disablenext")){
                return quit();
            }
        });
        $('.required[type=text]').each(function(){
            if(!$(this).val()){
                return quit();
            }
        });
        if(done){$('.myCheckBox').prop('disabled',false);}
    });
});

Edit 2:

If you want to show a div when the checkbox is checked and hide it when the checkbox is disabled, use

JavaScript:

$(document).ready(function() {
    $('.required').change(function() {
        var done=true;
        function quit(){
            $('.myCheckBox').prop('disabled',true).removeAttr('checked');
            done=false;
            $('#div2').addClass('hide');
            return false;
        }
        $('.required.dropdown').each(function(){
            if($(this).children(':selected').hasClass("disablenext")){
                return quit();
            }
        });
        $('.required[type=text]').each(function(){
            if(!$(this).val()){
                return quit();
            }
        });
        if(done){$('.myCheckBox').prop('disabled',false);}
    });
    $('.myCheckBox').click(function(){
        $('#div2')[(this.checked?'remove':'add')+'Class']('hide');
    });
});

CSS:

.hide{display:none}

See it here: http://jsfiddle.net/JKmkL/133/