时间戳

首页 > 解决方案 > 允许在第二次检查时将单选字段设置为可取消检查

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

问题描述

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

我知道这是非标准的。

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

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

示例 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 答案都是受欢迎的。干杯。

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

标签： javascriptjqueryradio

解决方案

你可以这样做：

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>

推荐阅读