Grow your CSS skills. Land your dream job.

[Solved] Need help with disabling select box options

  • # September 10, 2010 at 3:47 pm

    Anyone with any JavaScript/jQuery experience? Need some help…

    I’m putting together a page that will be used for an account creation process. As part of it, the user has to pick three security questions and provide answers. So, on the page there’s three identical select boxes with the same set of questions to choose from.

    Now, the issue is that we don’t want the user to be able to pick the same question multiple times. So, we’ve put together the following script (with the help of a tutorial we found online). When the user selects a question from one of the menus, that same question is disabled in the other two menus.

    Here’s what we have so far:



    < !DOCTYPE html>














    That works fine, but there’s one issue – if the user changes any of the questions that they picked, such that one that they chose earlier is no longer used, it remains disabled even though it shouldn’t be. In other words, say the user chooses Option 1 from the first menu (which then disables Option 1 in the second and third menus). If they then change their selection in the first menu to Option 2, then Option 1 should reenable in the second and third menus since it’s no longer selected anywhere.

    So, I need to write a function that checks to see if an option is disabled but not selected across all three menus, and if so, then reenable it. I just have no idea how.

    If anyone has any insight, or knows of a better way to do this, please let me know!

    # September 10, 2010 at 4:49 pm

    This could be a little cleaner, like storing the $(‘.question’) in a variable and whatnot, plus I don’t particularly like hard-coding ‘.question’ everywhere, but here:



    // This function should return an array of the value properties of all the selected options
    function getSelectedValues() {
    // Initialize an empty array to store the values
    var selectedValues = []
    // grab all the selected option elements and store them in a variable
    , $selected = $('.question').children('option:selected');

    $selected.each(function(){
    // this = the selected element. this.value = the value property
    // the push method adds its argument to the end of an array
    selectedValues.push(this.value);
    });

    // Send the results out into the ether
    return selectedValues;
    }

    // This grabs all the disabled options and changes their disabled property to the empty string
    function clearDisabled() {
    $('.question').children(':disabled').attr('disabled', '');
    }

    // This function disables all the options that are in the array it gets passed
    function disableSelected(selectedValues) {
    // This probably wasn't necessary, but it's good practice to build things like this into your code in case you reuse it in ways you didn't expect. You could add a different default value
    sv = selectedValues || [];

    // For each value in the array, we get all the options whose value is the same as that value, but filter out the one that is actually selected
    // Then we change those elements to disabled
    for (var i=0;i $('.question').children('option[value=' + sv[i] + ']').not(':selected').attr('disabled', 'disabled');
    }
    }

    $(document).ready(function(){
    // OK, the DOM is ready to manipulate, so let's call all those functions we just assigned:
    // When any of the selects change, do some stuff:
    $('.question').change(function(){
    // First find all the values that have been selected, and store them as an array
    selectedValues = getSelectedValues();
    // Then make all the options enabled
    clearDisabled();
    // Then pass the selected values we got earlier to the function that disables those values everywhere they are not selected
    disableSelected(selectedValues);
    });

    });

    Get all the values that are selected, then enable all the options, then disable all the options that are selected.

    # September 10, 2010 at 6:20 pm

    Will have to test this some more, but so far, it looks like…IT WORKS! Dude, you are a lifesaver! Seriously, thank you so much!

    Could you explain a little more about how this works? Just for my own reference…

    # September 10, 2010 at 8:35 pm

    Updated the code to include explanatory comments. I might have over-explained, but I figured it was better than under-explaining…

    # September 11, 2010 at 12:02 am

    Fantastic! Can I buy you a beer? :-)

    I was trying to think of ways I could “track” which options had to be reenabled, but that whole line of thinking was too complex and I couldn’t get it to work. Your method is brilliant – just reset everything to enabled first, and THEN disable the selected options. Now that I’ve seen it, it makes perfect sense.

    Can I credit you in the code somehow when I use this in my project? You really helped me out a lot.

    # September 11, 2010 at 4:36 pm

    Such high praise… You can credit me if you want. Is there a PM thing here? …Yeah, there we go. I’ll give you my name and website, though there’s not anything there right now.

    And you can buy me a beer next time you’re in the city.

    # May 11, 2012 at 2:05 am

    Really very nice demo..It helped me alot in my coding

    Thanku so much…..!!!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".