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

Question

我希望能够在页面上围绕各种无线电组的容器上设置一个 class 名称，这将允许这些无线电组不可检查/可取消 - 从而允许用户设置无线电场回无。名称应假定为动态的，以便代码尽可能可重用。我认为可以公平地假设在具有 class.

的每个元素集中只会出现一个唯一的输入名称

我知道这不符合标准。

我知道之前有人提过类似的问题。

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

示例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) {
  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>

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

Allow radio fields to be set to decheckable on second check

javascript

jquery

radio