允许无线电字段在第二次检查时设置为可拆卸的

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无线电则不会。

香草和jQuery的答案都是受欢迎的。干杯。

更新-我已经设置它为完整，虽然它还没有功能，键盘输入。一般来说，我建议一种跟踪所检查的值，然后检查每个更改事件的方法将提供更好的覆盖率。此外，我认为更改复选框以允许检查单个值比将收音机更改为不可勾选要更整洁。另外，我不敢相信内华达州不会再提供任何新的统计数据。

Answer 1

你可以这样做：

var s;
$('.detickable-radio input:radio, .detickable-radio input:radio ~ label').mousedown(function(e) {
  var $this = $(this).is(":radio") ? $(this) : $(this).prev();
  s = $this.is(":checked")
}).mouseup(function(e) {
  var $this = $(this).is(":radio") ? $(this) : $(this).prev();
  $this.prop("checked", !s)
}).click(function(e) {
  e.preventDefault()
});

​

var s;
$('.detickable-radio input:radio, .detickable-radio input:radio ~ label').mousedown(function(e) {
  var $this = $(this).is(":radio") ? $(this) : $(this).prev();
  s = $this.is(":checked")
}).mouseup(function(e) {
  var $this = $(this).is(":radio") ? $(this) : $(this).prev();
  $this.prop("checked", !s)
}).click(function(e) {
  e.preventDefault()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

​