ラベルをクリックするとラジオボタンが選択されなくなる

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 {表示：なし。 }