Have done a lot of searching around this, but have yet to find an answer that works for my situation. I have a single select question (7 choices). For one of the choices I would like to make it so that it is NOT selectable - and specifically I would like to hide the radio button. So I do want them to see the text of the choice, but not see a radio button. What would be the best way to do this and what would that code look like? Would it be JAVA for the question, or HTML within the response choice?
Any help would be greatly appreciated!
Page 1 / 1
If you want to completely hide one option while You want to keep it in question, you can do so by;
1) create embedded variable say flag set it 1
2) on this option in question apply display choice logic say flag=999, this condition will never be true and hence respondent will not see it.
1) create embedded variable say flag set it 1
2) on this option in question apply display choice logic say flag=999, this condition will never be true and hence respondent will not see it.
I always want the text of the option to show, but just want to hide the button. Using it more of a reference for respondents to see. So something like below would be the options. "6" would always show, but the radio button would be missing. The remaining would be selectable.
6
O 7
O 8
O 9
O 10
6
O 7
O 8
O 9
O 10
Not sure why that showed up so weird when i posted and highlighted the 6 row. But imagine the '6' choice looking like the others but without the radio button to the left.
You could hide the radio button on the first choice like this:
```
Qualtrics.SurveyEngine.addOnload(function() {
jQuery('input[type=radio]:first').hide();
});
```
```
Qualtrics.SurveyEngine.addOnload(function() {
jQuery('input[type=radio]:first').hide();
});
```
Thanks! I knew it would be something simple. For future reference, what if I wanted to do an item that was in the middle of the list? I see that 'first' and 'last' work as choices. But what if I wanted to hide the button for say the 7th item in a list of 10?
> @GeoffK said:
> Thanks! I knew it would be something simple. For future reference, what if I wanted to do an item that was in the middle of the list? I see that 'first' and 'last' work as choices. But what if I wanted to hide the button for say the 7th item in a list of 10?
Use an nth-child selector.
> Thanks! I knew it would be something simple. For future reference, what if I wanted to do an item that was in the middle of the list? I see that 'first' and 'last' work as choices. But what if I wanted to hide the button for say the 7th item in a list of 10?
Use an nth-child selector.
Excuse my lack of programming skills, but what would that look like? Tried this and it didn't work.
jQuery('input[type=radio]:nth-child(7)').hide();
jQuery('input[type=radio]:nth-child(7)').hide();
> @GeoffK said:
> Excuse my lack of programming skills, but what would that look like? Tried this and it didn't work.
> jQuery('input[type=radio]:nth-child(7)').hide();
Hmm...use :eq(6) instead.
> Excuse my lack of programming skills, but what would that look like? Tried this and it didn't work.
> jQuery('input[type=radio]:nth-child(7)').hide();
Hmm...use :eq(6) instead.
Thanks Tom! It worked.
@GeoffK - If you are comfortable with doing JavaScript then all that works fine. I personally find that it is easier to just use impossible display logic (which is what @bansalpeeyush29 was saying). Impossible display logic is something that will _never be true_.
The images below shows how to do that to a question choice.
!
!
The reason my display logic will hide the question choice is that I will never have an embedded data field called "1", thus it will never be equal to "2", and a as a result the question choice will never be displayed.
The images below shows how to do that to a question choice.
!
!
The reason my display logic will hide the question choice is that I will never have an embedded data field called "1", thus it will never be equal to "2", and a as a result the question choice will never be displayed.
That all makes sense. However I would like to show the text of the option, just not have the option able to be selected. Strange I know, but we are being asked to show the option as a reference point for the respondent, but not allow them to select it. By doing display logic, that hides the entire option from the respondent, I only wanted to hide the radio button.
The java worked great to solve this issue.
The java worked great to solve this issue.
> @TomG said:
> You could hide the radio button on the first choice like this:
> ```
> Qualtrics.SurveyEngine.addOnload(function() {
> jQuery('input[type=radio]:first').hide();
> });
> ```
@TomG, If I wanted to hide all radio buttons (in order to make a scrolling list of images that are not selectable), could I use a similar JS?
> You could hide the radio button on the first choice like this:
> ```
> Qualtrics.SurveyEngine.addOnload(function() {
> jQuery('input[type=radio]:first').hide();
> });
> ```
@TomG, If I wanted to hide all radio buttons (in order to make a scrolling list of images that are not selectable), could I use a similar JS?
> @MauroUsabilitySci said:
> @TomG, If I wanted to hide all radio buttons (in order to make a scrolling list of images that are not selectable), could I use a similar JS?
Use the below code:
jQuery(".QuestionBody").css("pointer-events","none");
jQuery('input[type=radio]').hide();
> @TomG, If I wanted to hide all radio buttons (in order to make a scrolling list of images that are not selectable), could I use a similar JS?
Use the below code:
jQuery(".QuestionBody").css("pointer-events","none");
jQuery('input[type=radio]').hide();
> @rondev said:
> > @MauroUsabilitySci said:
> > @TomG, If I wanted to hide all radio buttons (in order to make a scrolling list of images that are not selectable), could I use a similar JS?
>
> Use the below code:
>
> jQuery(".QuestionBody").css("pointer-events","none");
> jQuery('input[type=radio]').hide();
>
>
>
Hi @rondev, I tried this, but the radio buttons still appear they are just un-clickable. I ideally would like the radio buttons to not appear, just the answer choice (image). I also have JS on this question to create a fixed pane with a scrolling list of answer options, and adding the above code seems to have impeded that function.
> > @MauroUsabilitySci said:
> > @TomG, If I wanted to hide all radio buttons (in order to make a scrolling list of images that are not selectable), could I use a similar JS?
>
> Use the below code:
>
> jQuery(".QuestionBody").css("pointer-events","none");
> jQuery('input[type=radio]').hide();
>
>
>
Hi @rondev, I tried this, but the radio buttons still appear they are just un-clickable. I ideally would like the radio buttons to not appear, just the answer choice (image). I also have JS on this question to create a fixed pane with a scrolling list of answer options, and adding the above code seems to have impeded that function.
> @MauroUsabilitySci said:
> > @rondev said:
> > > @MauroUsabilitySci said:
> > > @TomG, If I wanted to hide all radio buttons (in order to make a scrolling list of images that are not selectable), could I use a similar JS?
> >
> > Use the below code:
> >
> > jQuery(".QuestionBody").css("pointer-events","none");
> > jQuery('input[type=radio]').hide();
> >
> >
> >
>
> Hi @rondev, I tried this, but the radio buttons still appear they are just un-clickable. I ideally would like the radio buttons to not appear, just the answer choice (image). I also have JS on this question to create a fixed pane with a scrolling list of answer options, and adding the above code seems to have impeded that function.
I suspect that this is theme related and it isn't really radio buttons you are trying to hide, but labels that look like radio buttons. Try adding this to your question text:
```
<style>
.Skin label.SingleAnswer > span::before {display:none}
</style>
```
> > @rondev said:
> > > @MauroUsabilitySci said:
> > > @TomG, If I wanted to hide all radio buttons (in order to make a scrolling list of images that are not selectable), could I use a similar JS?
> >
> > Use the below code:
> >
> > jQuery(".QuestionBody").css("pointer-events","none");
> > jQuery('input[type=radio]').hide();
> >
> >
> >
>
> Hi @rondev, I tried this, but the radio buttons still appear they are just un-clickable. I ideally would like the radio buttons to not appear, just the answer choice (image). I also have JS on this question to create a fixed pane with a scrolling list of answer options, and adding the above code seems to have impeded that function.
I suspect that this is theme related and it isn't really radio buttons you are trying to hide, but labels that look like radio buttons. Try adding this to your question text:
```
<style>
.Skin label.SingleAnswer > span::before {display:none}
</style>
```
That worked! Thank you, @TomG.
@TomG the code you provided above did exactly what I was looking for, however, it seems to be effecting the other multiple choice single select questions that come after it on the page--do you have any idea why this may be or how to fix it? I only put the code into the HTML of the single question that I was trying to use it for and not into any other, but it seems to still somehow be carrying forward.
> @MauroUsabilitySci said:
> @TomG the code you provided above did exactly what I was looking for, however, it seems to be effecting the other multiple choice single select questions that come after it on the page--do you have any idea why this may be or how to fix it? I only put the code into the HTML of the single question that I was trying to use it for and not into any other, but it seems to still somehow be carrying forward.
Anything you put in a `<style>` tag effects the whole page. The easiest fix is for it to be the only single select MC on the page. Alternatively, you can add the QID of the question to the rule selector.
```
.Skin #QIDxx label.SingleAnswer > span::before {display:none}
```
> @TomG the code you provided above did exactly what I was looking for, however, it seems to be effecting the other multiple choice single select questions that come after it on the page--do you have any idea why this may be or how to fix it? I only put the code into the HTML of the single question that I was trying to use it for and not into any other, but it seems to still somehow be carrying forward.
Anything you put in a `<style>` tag effects the whole page. The easiest fix is for it to be the only single select MC on the page. Alternatively, you can add the QID of the question to the rule selector.
```
.Skin #QIDxx label.SingleAnswer > span::before {display:none}
```
Good to know. Thank you, @TomG.
> @MauroUsabilitySci said:
> That worked! Thank you, @TomG.
Where do you put this code? I tried it in the question text but it didn't work for me?
> That worked! Thank you, @TomG.
Where do you put this code? I tried it in the question text but it didn't work for me?
> @SAW said:
> > @MauroUsabilitySci said:
> > That worked! Thank you, @TomG.
>
> Where do you put this code? I tried it in the question text but it didn't work for me?
You put it in the question text, but you have to be in HTML view when you do it.
> > @MauroUsabilitySci said:
> > That worked! Thank you, @TomG.
>
> Where do you put this code? I tried it in the question text but it didn't work for me?
You put it in the question text, but you have to be in HTML view when you do it.
> @TomG said:
> > @MauroUsabilitySci said:
> > > @rondev said:
> > > > @MauroUsabilitySci said:
> > > > @TomG, If I wanted to hide all radio buttons (in order to make a scrolling list of images that are not selectable), could I use a similar JS?
> > >
> > > Use the below code:
> > >
> > > jQuery(".QuestionBody").css("pointer-events","none");
> > > jQuery('input[type=radio]').hide();
> > >
> > >
> > >
> >
> > Hi @rondev, I tried this, but the radio buttons still appear they are just un-clickable. I ideally would like the radio buttons to not appear, just the answer choice (image). I also have JS on this question to create a fixed pane with a scrolling list of answer options, and adding the above code seems to have impeded that function.
>
> I suspect that this is theme related and it isn't really radio buttons you are trying to hide, but labels that look like radio buttons. Try adding this to your question text:
> ```
> <style>
> .Skin label.SingleAnswer > span::before {display:none}
> </style>
> ```
@TomG Could I use something similar to this using HTML to hide a the radio button on individual choices? If so, what would that look like? I believe our theme is making it so that the java isn't working to hide the radio buttons.
I have 7 choices and I would like to hide the radio buttons for choice 1 and choice 7.
> > @MauroUsabilitySci said:
> > > @rondev said:
> > > > @MauroUsabilitySci said:
> > > > @TomG, If I wanted to hide all radio buttons (in order to make a scrolling list of images that are not selectable), could I use a similar JS?
> > >
> > > Use the below code:
> > >
> > > jQuery(".QuestionBody").css("pointer-events","none");
> > > jQuery('input[type=radio]').hide();
> > >
> > >
> > >
> >
> > Hi @rondev, I tried this, but the radio buttons still appear they are just un-clickable. I ideally would like the radio buttons to not appear, just the answer choice (image). I also have JS on this question to create a fixed pane with a scrolling list of answer options, and adding the above code seems to have impeded that function.
>
> I suspect that this is theme related and it isn't really radio buttons you are trying to hide, but labels that look like radio buttons. Try adding this to your question text:
> ```
> <style>
> .Skin label.SingleAnswer > span::before {display:none}
> </style>
> ```
@TomG Could I use something similar to this using HTML to hide a the radio button on individual choices? If so, what would that look like? I believe our theme is making it so that the java isn't working to hide the radio buttons.
I have 7 choices and I would like to hide the radio buttons for choice 1 and choice 7.
GeoffK did you ever figure this out? I am trying to do the same thing. Or TomG , might you know the piece of CSS needed?
Nevermind. Another post of TomG was helpful here (https://community.qualtrics.com/XMcommunity/discussion/1107/option-in-multiple-choice-question)
This will make the second radio button invisible, for example:
https://community.qualtrics.com/XMcommunity/discussion/comment/47959#Comment_47959
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.