Disable one option for multiple choice | XM Community
Solved

Disable one option for multiple choice

  • 14 January 2021
  • 9 replies
  • 527 views
P

I need to display a series of five images horizontally. The first image is a key, the remaining four images need to be selectable and users need to select two of these matching images.
So, I have created a multiple choice question.
How do I disable the first option (the key) so it is not selectable?
I have tried something like the following to no avail: document.getElementById(this.questionId)[0].style.display="none";
(I should note that I use this.questionID because I have manually changed the question name and I don't think Qualtrics uses the name as the element ID.

icon

Best answer by ahmedA 22 January 2021, 10:43

View original

9 replies

A
Rank
Userlevel 7
Badge +21

Changing the question name doesn't impact the questionId, so you don't need to worry about that. If you just want to display the image, you can also move it to your question via either the Rich Text Editor or the HTML view.
If you want to display it with the options, but disable selecting it, you'll can add the following JS to your question:
boxes = this.getQuestionContainer().querySelectorAll("input");
boxes[0].disable(); // This will disable clicking it, but still show the checkbox.
boxes[0].nextSibling.hide();

P

This code works for disabling, but how do I not even show the checkbox? I'm not familiar with the disable() function - only CSS and JS property disable = . In the jquery documentation there is a function "hide()" but that doesn't seem to work. What additional code would I need to hide that first checkbox only?

A
Rank
Userlevel 7
Badge +21

Have you tried the code?

P

Sorry for the delay! As my previous post said the code works for disabling the clicking on of the first element in the list, but it does not hide the actual checkbox itself.
I need to hide the checkbox and disable.

A
Rank
Userlevel 7
Badge +21

It appears that what I posted above works for vertical displays but not for horizontal display. Sorry for that. Here's the updated code. Should work on both.
boxes = document.querySelectorAll("[class*=checkbox]");
boxes[0].hide();
boxes[1].disable();
If you want to use it for a single answer answer question, then change checkbox to radio

P

Unfortunately this has the same behavior. It disables the checkbox, but the checkbox still shows. I've checked the computed CSS and there is a display: block!important from another stylesheet. Is that having any impact on this?

P

I've tried so many options with this code, including removeClass() and it's not actually removing the class. The latest code I have tried is:

var x = this.getQuestionContainer().querySelectorAll("input");
x[0].hide();
x[0].disable();
x[0].style.setProperty( 'display', 'none', 'important' );
x[0].attr('style', 'display: none !important');
x[0].css("cssText", "display: none !important;")

Of course this doesn't work either. I really wish Qualtrics didn't use !important for stylesheets (if that is the issue).

A
Rank
Userlevel 7
Badge +21

Try changing it to 

boxes[0].remove()

P

That works! So here is the final code because I didn't want to search the whole document, I just needed the specific question since I have multiple of these on the same page (document). This is a combination of different code snippets you included here:
boxes = this.getQuestionContainer().querySelectorAll("[class*=checkbox]");
boxes[0].hide();
boxes[0].remove();
boxes[1].disable();

Leave a Reply


Terms & Conditions