Stopp Radio-Button wird ausgewählt, wenn Label geklickt wird

Question

Ich kodiere eine Umfrage in Qualtrics, und aus verschiedenen Gründen werde ich die Radio-Buttons für eine bestimmte Frage manuell erstellt. Das Problem, das ich sehe, ist, dass, da die Optionsfelder, die ich erstelle, mit dem Rahmen von Qualtrics platziert werden, sie in einem Etikett sitzen, das ich nicht kontrolliere.

Hier ist ein Beispiel

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

das Teil in der Super-Label Ein Klick landet standardmäßig das erste Optionsfeld auswählen. Gibt es einen Weg, vielleicht für Attribute oder etwas, wo ich dieses Verhalten stoppen kann? Ich möchte nur den Radiobutton auswählen, wenn das innere Etikett angeklickt wird. Wiederum kontrolliere ich nicht den HTML-Code, der sich auf das äußere Label bezieht, sondern nur die inneren Labels.

Danke!

Answer 1

Ein schneller Hack, der funktionieren würde, besteht darin, eine versteckte Eingabe oberhalb der Optionsfelder zu erstellen, so dass das Klicken auf das äußere Label stattdessen dort fokussiert wird. Es ist definitiv ein Hack, aber Ihr Anwendungsfall ist seltsam.

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