Отключить радиокнопку при выборе метки при нажатии метки

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 { дисплей: нет; }