Arrêter le bouton radio d'être sélectionné lorsque l'on clique sur l'étiquette

Question

Je code une enquête dans Qualtrics, et pour diverses raisons, je crée manuellement les boutons radio pour une question spécifique. Le problème que je vois est que les boutons radio que je crée sont placés avec le framework de Qualtrics, ils sont placés dans une étiquette que je ne contrôle pas.

Voici un exemple

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

En cliquant sur la partie dans la super étiquette finit par sélectionner le premier bouton de la radio par défaut. Y at-il un moyen, peut-être en utilisant des attributs ou quelque chose, où je peux arrêter ce comportement? Je veux seulement que le bouton radio soit choisi si l'étiquette intérieure est cliquée. Encore une fois, je ne contrôle pas le html lié à l'étiquette extérieure, seulement les étiquettes internes.

Merci!

Answer 1

Un hack rapide qui fonctionnerait est de créer une entrée cachée au-dessus de vos boutons radio de sorte que le fait de cliquer sur l'étiquette extérieure se concentrerait là à la place. C'est définitivement un hack, mais votre cas d'utilisation est étrange.

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; }