Search code examples
htmlradio-buttonlabelqualtrics

Stop radio button from being selected when label is clicked

I am coding up a survey in Qualtrics, and for various reasons I am manually created the radio buttons for a specific question. The problem I see is that since the radio buttons I create are placed with Qualtrics' framework, they sit within a label that I don't control.

Here's an example

<label>
<p>Clicking also selects the first button, but it shouldn't</p>
 <label><p>Click this to select 1st button<input type="radio" name="c" id="a"></p></label>
 <label><p>Click this to select 2nd button<input type="radio" name="c" id="b"></p></label>
</label>

Clicking the part in the super label ends up selecting the first radio button by default. Is there a way, perhaps using for attributes or something, where I can stop that behaviour? I only want the radio button to be selected if the inner label is clicked. Again, I don't control the html related to the outer label, only the inner labels.

Thanks!

Solution

  • A quick hack that would work is to create a hidden input above your radio buttons so that clicking on the outer label would focus there instead. It is definitely a hack, but your use case is strange.

    https://jsfiddle.net/42qLgq75/

    HTML:

    <label>
 <p>Clicking also selects the first button, but it shouldn't</p>
 <input class='hiddenInput' id="a">
 <label><p>Click this to select 1st button<input type="radio" name="c" id="a"></p></label>
 <label><p>Click this to select 2nd button<input type="radio" name="c" id="b"></p></label>
</label>

    CSS: .hiddenInput { display: none; }