单击标签时停止单选按钮被选中

Question

我在Qualtrics中编写调查代码，出于各种原因，我手动为特定问题创建单选按钮。我看到的问题是，由于我创建的单选按钮放置在Qualtrics的框架中，因此它们位于我无法控制的标签内。

下面是一个例子

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

点击该超标签的部分结束默认选择第一个单选按钮。有没有办法，也许使用属性或什么，我可以阻止这种行为？如果单击内部标签，我只想选择单选按钮。同样，我不控制与外部标签相关的html，只控制内部标签。

谢谢！

Answer 1

一个可以工作的快速入侵方法是在单选按钮上方创建一个隐藏的输入，以便点击外部标签将集中在那里。这绝对是一个黑客，但你的用例很奇怪。

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 { 显示：无; }