允许在第二次检查时将单选字段设置为可取消选中

Question

我希望能够在页面上各种无线电组周围的容器上设置类名，这将允许这些无线电组不可检查/可取消 - 从而允许用户将无线电字段设置为空。应假定名称是动态的，以便代码尽可能可重用。我认为可以公平地假设该类的每个元素集中只出现一个唯一的输入名称。

我知道这是非标准的。

我知道以前也曾提出过类似的问题。

问题的复杂性在于以简单且一致的方式处理具有动态生成名称的多组无线电。一般来说，我见过的大多数解决方案都通过以某种其他方式将类应用于无线电输入来跟踪当前的选择。任何愿意讨论最好听的各种事件的利弊的答案也很有价值。

示例 HTML：

<ul class="detickable-radio">

  <li><input name="x1" type="radio" value="a" id="r_1_1"><label for="r_1_1">First Q First A</label></li>

  <li><input name="x1" type="radio" value="b" id="r_1_2"><label for="r_1_2">First Q 2nd A</label></li>

</ul>

<ul>

  <li><input name="y1" type="radio" value="c" id="r_2_1"><label for="r_2_1">Second Q First A</label></li>

  <li><input name="y1" type="radio" value="d" id="r_2_2"><label for="r_2_2">Second Q 2nd A</label></li>

</ul>

<ul class="detickable-radio">

  <li><input name="z1" type="radio" value="e" id="r_3_1"><label for="r_3_1">Third Q First A</label></li>

  <li><input name="z1" type="radio" value="f" id="r_3_2"><label for="r_3_2">Third Q 2nd A</label></li>

</ul>

期望的结果：x1 和 z1 无线电将不可检查，而 y1 无线电则不可检查。

Vanilla 和 jQuery 的答案都受到欢迎。干杯。

更新 - 我已将其设置为完整，尽管它尚未用于键盘输入。一般来说，我建议采用跟踪检查值然后检查每个更改事件的方法来提供更好的覆盖范围。另外，我认为更改复选框以允许检查单个值比将收音机更改为可标记会更整洁。另外，我不敢相信内华达州不会在另一天提供任何进一步的计数更新。

Answer 1

你可以这样做：var s;$('.detickable-radio input:radio, .detickable-radio input:radio ~ label').mousedown(function(e) {&nbsp; var $this = $(this).is(":radio") ? $(this) : $(this).prev();&nbsp; s = $this.is(":checked")}).mouseup(function(e) {&nbsp; var $this = $(this).is(":radio") ? $(this) : $(this).prev();&nbsp; $this.prop("checked", !s)}).click(function(e) {&nbsp; e.preventDefault()});var s;$('.detickable-radio input:radio, .detickable-radio input:radio ~ label').mousedown(function(e) {&nbsp; var $this = $(this).is(":radio") ? $(this) : $(this).prev();&nbsp; s = $this.is(":checked")}).mouseup(function(e) {&nbsp; var $this = $(this).is(":radio") ? $(this) : $(this).prev();&nbsp; $this.prop("checked", !s)}).click(function(e) {&nbsp; e.preventDefault()});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul class="detickable-radio">&nbsp; <li><input name="x1" type="radio" value="a" id="r_1_1"><label for="r_1_1">First Q First A</label></li>&nbsp; <li><input name="x1" type="radio" value="b" id="r_1_2"><label for="r_1_2">First Q 2nd A</label></li></ul><ul>&nbsp; <li><input name="y1" type="radio" value="c" id="r_2_1"><label for="r_2_1">Second Q First A</label></li>&nbsp; <li><input name="y1" type="radio" value="d" id="r_2_2"><label for="r_2_2">Second Q 2nd A</label></li></ul><ul class="detickable-radio">&nbsp; <li><input name="z1" type="radio" value="e" id="r_3_1"><label for="r_3_1">Third Q First A</label></li>&nbsp; <li><input name="z1" type="radio" value="f" id="r_3_2"><label for="r_3_2">Third Q 2nd A</label></li></ul>