Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Gray out select boxes once max number have been checked

I've got a request on a select question with a lengthy list to gray out unselected boxes once the max number have been checked.  It's set to select a minimum of 1 and maximum of 5 options.  It's a constructed list with 97 options total where respondents will see either 38 or 59 options total.

Zach, is this something that you could do with some javascript or would it be getting too complex?
asked May 19 by Jay Rutherford Gold (37,685 points)
Are you looking to actually disable the other checkboxes when the maximum has been reached, or just change how they look?
Ultimately disable.  My client's concern was he didn't see he had checked too many until clicking next and the error message popped up.  So, he was hoping that once he reached his max he would know right away.

1 Answer

0 votes
 
Best answer
This could be complex, but fortunately a lot of the hard work has already been done within the "Better Lighthouse Library."  Let's start by adding that to the questionnaire:

https://sawtoothsoftware.com/community-question-library/2238-better-lighthouse-library

With that setup, we just need to add this script to the select question:

<script>
$(document).on('lighthouseCheckboxChanged', function() {
    // Parameters
    var maxChecks = 5;
    
    // Run
    var items = $('input[name="hid_list_[% QuestionName() %]"]').val().split(',');
    var checkedItems = [];
    var uncheckedItems = [];
    
    items.forEach(function(item){
        var fullItem = '[% QuestionName() %]_' + item;
        if (SSI_GetValue(fullItem)) {
            checkedItems.push(fullItem);
        }
        else {
            uncheckedItems.push(fullItem);
        }
    });
    
    if (checkedItems.length >= maxChecks) {
        uncheckedItems.forEach(function(item){
            SSI_DisableRadioButtonOrCheckbox(item);
        });
    }
    else {
        items.forEach(function(item){
            SSI_EnableRadioButtonOrCheckbox('[% QuestionName() %]_' + item);
        });
    }
})
</script>
answered May 19 by Zachary Platinum Sawtooth Software, Inc. (153,100 points)
selected May 19 by Jay Rutherford
Ahhhh fantastic!  Didn't think I be able to get this one in this time.  As it would have it I already have been putting the Better Lighthouse Library in my programs as a default.  This is perfect.  Thanks so much Zach, you are the best!
...