How to change the background color for unselected choices? | XM Community
Question

How to change the background color for unselected choices?


Hello Qualtrics community,

I use a Multiple Choice question (Multiple Answer) with more than 100 choices. Each subject can only select up to 5 answers. I want to change the unselected choices' background color when a subject selects 5 choices. My code does not work. Only the background color of choices with sepicific ids (id = 2, 5, 6) changed. Is there something wrong?
(In the preview mode, the choices looks like buttons, not checkbox.)
Here is my code:
>if(selectedchoice.length==5){
> jQuery("#"+ this.questionId +" input:checkbox:not(:checked)" ).attr("disabled", true);
>
> var t1 = jQuery("#" + this.questionId + " input:checkbox:(:checked)").attr("id");
> for (var s1=0; s1<t1.length; s1++){
> jQuery("#" + this.questionId + " label.MultipleAnswer:eq(" + t1[s1] + ")").css("background","blue");
> };
>
> }else{
> jQuery("#"+ this.questionId +" input:checkbox:not(:checked)" ).attr("disabled", false);
> };
Thanks very much!

2 replies

Userlevel 5
Badge +6
Hi @cqulihui,
first of all I'd recommend you to check the console log for some errors. Press F12 to see it. You'll find out that `selectedchoice` is not defined. This discussion should help you to get the number of actually selected choices.
Run the code line by line to see which works and which not. If the line does not work, check the console. The code which works for one template does not need to work for another one. Check if names of your classes and psedoclasses are correct using the inspector.
I don't know when exactly the code runs, but it should be executed each time the respondent clicks on a choice (or to anywhere to the question). If it is inside `Qualtrics.SurveyEngine.addOnload `or `addOnReady` only, the code will run only once when no choice is selected yet. Your code should be placed inside and onclick event (which wil be inside `Qualtrics.SurveyEngine.addOnload `or `addOnReady`) . You can do it for example like this: `this.questionclick = function(event) {};`
Hellow @fleb, Thanks very much for your detailed answer! I will have a try. Thanks a lot.

Leave a Reply