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

Gray out after multiple select limit reached?

  • February 13, 2024
  • 2 replies
  • 174 views
G
Level 1 ●
Forum|alt.badge.img+2
  • GregD
  • Level 1 ●
  • 5 replies

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. 

Best answer by Sachin Nandikol

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 = [];
    
    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.registry[qid].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

2 replies

Sachin Nandikol
QPN Level 6 ●●●●●●
Forum|alt.badge.img+44
  • Sachin Nandikol
  • QPN Level 6 ●●●●●●
  • 530 replies
  • Answer
  • February 13, 2024

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 = [];
    
    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.registry[qid].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

Sachin
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 6083 replies
  • February 13, 2024

@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. 


Terms & ConditionsAccessibility statement