How to hide a single radio button on a single select question

GeoffKGeoffK Cincinnati, OHFounding Community Member Qubie ✭

How to hide a single radio button on a single select question

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!

Best Answer

  • TomGTomG Raleigh, NC Wizard ✭✭✭✭✭
    Accepted Answer

    You could hide the radio button on the first choice like this:

    Qualtrics.SurveyEngine.addOnload(function() {
        jQuery('input[type=radio]:first').hide();
    });
    
«1

Answers

  • bansalpeeyush29bansalpeeyush29 IndiaCommunity Member Wizard ✭✭✭✭✭

    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.

  • GeoffKGeoffK Cincinnati, OHFounding Community Member Qubie ✭

    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

  • GeoffKGeoffK Cincinnati, OHFounding Community Member Qubie ✭

    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.

  • GeoffKGeoffK Cincinnati, OHFounding Community Member Qubie ✭

    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?

  • TomGTomG Raleigh, NCCommunity Member, Product Ideas Wizard ✭✭✭✭✭

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

  • GeoffKGeoffK Cincinnati, OHFounding Community Member Qubie ✭

    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();

  • TomGTomG Raleigh, NCCommunity Member, Product Ideas Wizard ✭✭✭✭✭

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

  • GeoffKGeoffK Cincinnati, OHFounding Community Member Qubie ✭

    Thanks Tom! It worked.

  • AkdashboardAkdashboard South CarolinaCommunity Member, Product Ideas Superuser ✭✭✭✭
    edited August 2018

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

  • GeoffKGeoffK Cincinnati, OHFounding Community Member Qubie ✭

    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.

  • MauroUsabilitySciMauroUsabilitySci New York, NYCommunity Member Qubie ✭

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

  • rondevrondev Community Member - Trial User Guru ✭✭

    @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();
    
  • MauroUsabilitySciMauroUsabilitySci New York, NYCommunity Member Qubie ✭

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

  • TomGTomG Raleigh, NCCommunity Member, Product Ideas Wizard ✭✭✭✭✭

    @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>
    
  • MauroUsabilitySciMauroUsabilitySci New York, NYCommunity Member Qubie ✭

    That worked! Thank you, @TomG.

  • MauroUsabilitySciMauroUsabilitySci New York, NYCommunity Member Qubie ✭

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

  • TomGTomG Raleigh, NCCommunity Member, Product Ideas Wizard ✭✭✭✭✭

    @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}
    
  • MauroUsabilitySciMauroUsabilitySci New York, NYCommunity Member Qubie ✭

    Good to know. Thank you, @TomG.

  • SAWSAW Community Member Qubie ✭

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

Sign In to Comment