Instantly limit choice selections in a multiple choice | XM Community
Skip to main content

In a Multiple Choice question, the respondent is allowed to select no more than 2 options. Depending on which one they select, an Text Entry question appears. 

I added Validation in order to make sure they get an error, but the error only appears after the respondent clicks Next. How can I stop them from selecting more than 2 options right away?

I found the following script in the Community, but it's not working for me...

this.questionclick = function(event,element){
var selectedchoice=this.getSelectedChoices();
if(selectedchoice.length==4){
jQuery("#NextButton").click()
}
}

instead of next button click you can apply function on checkbox selection.

if there is class checkbox available in your theme the use jQuery(".checkbox").click()


instead of next button click you can apply function on checkbox selection.

if there is class checkbox available in your theme the use jQuery(".checkbox").click()

Still nothing. Is there an error in my script?

 

 


instead of next button click you can apply function on checkbox selection.

if there is class checkbox available in your theme the use jQuery(".checkbox").click()

Still nothing. Is there an error in my script?

 

 

Yes, ‘this’ doesn’t refer to the question object inside the click handler. Try:

var qobj = this;
this.questionclick = function(event,element){
var selectedchoice=qobj.getSelectedChoices();
if(selectedchoice.length==2)qobj.clickNextButton();
});

 


This is working! But the problem is that now the respondent doesn't get to correct the choice or answer the open questions that popup after the selection. I need the respondent to stay on the page, just not being allowed to select more than 2… Sorry if I misunderstood the purpose of the script.

Qualtrics.SurveyEngine.addOnReady(function()
{
var qobj = this;
this.questionclick = function(event,element){
var selectedchoice=qobj.getSelectedChoices();
if(selectedchoice.length==2)qobj.clickNextButton);
}});
 


This is working! But the problem is that now the respondent doesn't get to correct the choice or answer the open questions that popup after the selection. I need the respondent to stay on the page, just not being allowed to select more than 2… Sorry if I misunderstood the purpose of the script.

Qualtrics.SurveyEngine.addOnReady(function()
{
var qobj = this;
this.questionclick = function(event,element){
var selectedchoice=qobj.getSelectedChoices();
if(selectedchoice.length==2)qobj.clickNextButton);
}});
 

I was just telling you how to get your original code working. 

I think you want something like this:

var cbs = jQuery("#"+this.questionId+" Itype=checkbox]");
cbs.click(function() {
if(cbs.filter(":checked").length > 2 && this.checked) this.checked = false;
});

 


@JohannesCE yes, @TomG script will definitely resolve your issue. As it will disable the selection of all the further checkbox selection and respondent will not be allowed to select after 2 checkboxes.

Since you want to alert respondent immediately after second checkbox selection, you can add below script after “this.checked = false;”. it will prompt an error message too.

 

	setTimeout(function(){
if(count==2){
alert("You cannot select more than two choices, please click 'OK' and then click 'Next' button to proceed further.");
}
},500);

 


@ArunDubey and @TomG, I assume this should work with the Simple Layout? I have the feeling I'm missing something very basic, because it's still not working. 

Qualtrics.SurveyEngine.addOnReady(function() 
{
  var cbs = jQuery("#" + this.questionId + " type=checkbox]")
  cbs.click(function() {
  if (cbs.filter(":checked").length > 2 && this.checked) {
  this.checked = false;
  setTimeout(function(){
  if(count==2){
  alert("You cannot select more than two choices, please click 'OK' and then click 'Next' button to proceed further.");
    }
   },500);
    }
  });
});

 


remove these two brackets. code should be like that.

var  SelectedCheck = jQuery("#"+this.questionId+" .checkbox");
SelectedCheck.click(function() {
var count=SelectedCheck.filter(":checked").length
if(count > 2 && this.checked)
this.checked = false;
setTimeout(function(){
if(count==2){
alert("You cannot select more than two choices, please click 'OK' and then click next button to proceed further.");
}
},500);
});


 


At this time, simple layout isn’t meant to support JS. jQuery isn’t loaded, and the selectors are different. Specifically, if I remember correctly, the id of the question div (”#”+this.questionId) is different.

 


Still not working. Tom_1842 wrote in another thread that jQuery is included by default for Flat, Modern, and Classic Layouts but not for Simple Layout at this time. Adding it in the header is only necessary for Simple Layout. Also, most IDs and class names are different for Simple Layout.

Could this have something to do with it?


Still not working. Tom_1842 wrote in another thread that jQuery is included by default for Flat, Modern, and Classic Layouts but not for Simple Layout at this time. Adding it in the header is only necessary for Simple Layout. Also, most IDs and class names are different for Simple Layout.

Could this have something to do with it?

Yes, that’s essentially what I said in my last reply.


Sorry @TomG, I think we were writing simultaneously. So to conclude, the solution in this thread works, just not for the Simple Layout. And there is no way to instantly limit choice selections in a multiple choice when using Simple Layout. 


Leave a Reply