Gray out after multiple select limit reached? | XM Community
Skip to main content

This seems like it would be common and I have seen Qualtrics surveys do this but…

 

I have a multiple-select multichoice question with a validation option of “answer range” and range is min ‘1’ max ‘3’.

 

After a user selects 3 choices, I want to gray out the other choices.

 

There are 18 in total on this question (very long, I know)- can anyone help me with some js or something? Feedback from testing users is that they have to go to the next page button before it tells them their limit is reached, and it’s a poor experience. 

Hi @GregD,

You can use the code below. It may not produce the exact result you're looking for, but it should serve your purpose:

Qualtrics.SurveyEngine.addOnReady(function(){
    const qid = this.questionId;
    var okay_choices = s];
    
    that = this;
    this.questionclick = function(){
        sel_choices = that.getSelectedChoices();
        // Set the maximum number of choices you want here
        if(sel_choices.length <=3){
            okay_choices = sel_choices;
        }
        else{
            alert("You can not select more than 3 choices.\\nPlease deselect to select another.");
            sel_choices.forEach((item) => {
                Qualtrics.SurveyEngine.registry/qid].setChoiceValue(item,false);
                });
            okay_choices.forEach((item) => {
                Qualtrics.SurveyEngine.registryaqid].setChoiceValue(item,true);
                });
        }


    }
});

 

If they select more than 3 they will get an error as shown in below screenshot:

 

You can also refer the below link for more information:

https://community.qualtrics.com/topic/show?tid=12896&fid=12


@GregD,

You could do this:

Qualtrics.SurveyEngine.addOnload(function() {
var cbs = jQuery("#"+this.questionId+" [type=checkbox]");
cbs.click(function() {
if(cbs.filter(":checked").length==3) cbs.not(":checked").prop("disabled",true);
else cbs.prop("disabled",false);
});
});

You might be interested in the bubbleBurst function. It disables choices when the max is reached and auto advances if desired. 


Leave a Reply