Hide radio button for one multiple choice option only in one block

Hi ​@baharsener ,

You can achieve this by using the below Javascript and CSS.

JS:

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/
    boxes = document.querySelectorAll("[class*=radio]");
    boxes[0].hide();
    boxes[1].disable();

});

CSS: (Question Text HTML View):

<style type="text/css">#QID54-2-label {
    padding-top: 20px;
    padding-bottom: 20px;
    background: white;}
</style>

Change the QID, as per the order of the options you have provided.

​@Akash B A thank you so much for your response! When I use the first (JavaScript code) I can disable the radio, however it still displays as a radio. I also tried the CSS, but my goal is not to hide the question text (there is no text, just an image) only the radio button! Do you know how I may be able to fully hide it? 

​@baharsener Use this code, change the QID to yours. (only work with flat and morden layouts)

Qualtrics.SurveyEngine.addOnload(function () {
    const radioLabel = document.querySelector('label[for="QR~QID6~2"].q-radio');
	boxes = document.querySelectorAll("[class*=radio]");
    boxes[0].hide();
    boxes[1].disable();
    radioLabel.style.visibility = 'hidden';
});

Let me know if it work

Hi ​@baharsener ,

Apologies if I was not clear. The CSS is for removing the background of the radio button not for the text. So, the CSS provided, paste it in HTML View and change the QID according to the options.

Also the layout which I have used is Classic.

Result:

Hope this helps.

Hi ​@Akash B A ​@Nam Nguyen !

Thank you both for your willingness to help me! Unfortunately I am still having the issue, I am attaching screenshots to double-check what I am doing is correct!

The steps I took:

First, I downloaded my data to see the question ID’s, the first question I have has QID320. I noticed that in your example code snippets, these ID’s had additional numbers next to them, so I went to preview the questions, and right clicked on the question to ‘inspect’ and look at the page code. I saw that the question was labelled as “QR~QID320~16”

I tried both solutions with and without this additional number, however, it did not work (my theme is ‘flat’). I am attaching screenshots just to make sure that I tried to implement this correctly. 

• HTML CSS solution: (without additional number)

• HTML CSS solution (with additional number):

• JavaScript solution (without additional number):

• 

  JavaScript solution (with additional number):

  

   

I tried to match the syntax in the example screenshots you have provided, however I am not entirely sure what these additional numbers mean, which is why I tried multiple different ways, however my radio button is still visible. I appreciate any insight into this!

Thank you,

Bahar

​@baharsener You made a typo, it’s style not sty;e . Just copy/paste my code in the previous response and change the ID and yes you should inspect them to find the right element.