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

Posted 2023-03-27

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

【英文标题】：Allow radio fields to be set to decheckable on second check

【发布时间】：2021-02-16 19:35:28

【问题描述】：

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

我知道这是非标准的。

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

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

示例 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 更简洁。此外，我不敢相信内华达州不会再提供任何进一步的计数更新。

【问题讨论】：

您可以使用复选框轻松完成，只需将 CSS 样式更改为单选按钮

【参考方案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>

【讨论】：

这很好，但它会禁用键盘输入，并且不适用于通过包装标签中的 for 属性进行的常见检查。不打勾！

@jamesgarrett 立即尝试

我已经删除了我的答案，因为@CarstenLøvboAndersen 已经给了我一个很好的答案+1，不需要编辑我的答案。