带有 html 属性“已选中”的不可选中的单选按钮

【问题标题】：uncheckable radio buttons with html attribute 'checked'带有 html 属性“已选中”的不可选中的单选按钮
【发布时间】：2017-01-06 09:32:34
【问题描述】：

我正在使用#javascript 中一个友好的小伙子提供的这个简单脚本来取消选中单选按钮：

 $('.feed').on('click', 'input[type=radio]', function() {
    var myParent = $(this).closest('div');
  var ref = $(this);
  if( myParent.data('val') == $(this).val() ){
    var ref = myParent.find('.none input');
    ref.prop('checked',true);
  }
    myParent.data('val',ref.val() )
 });

一切正常，请参阅fiddle，但是当我将“已选中”属性添加到一个单选按钮时，您实际上必须单击两次才能取消选中它，请参阅fiddle。这让我想到，将“已检查”设置为属性实际上等于手动检查单选按钮吗？或者为什么我失败了？

【问题讨论】：

标签： javascript jquery html radio-button

【解决方案1】：

这与添加属性与单击无关，它是附加代码，特别是这一行：

if (myParent.data('val') == $(this).val() ){

也就是说，如果您之前点击过此按钮，请将其关闭。

然而，你并没有告诉代码你已经（实际上）“点击”了它。

您可以通过将初始值添加到“myParent”来做到这一点，一种方法是将其添加到 html：

<div data-val='1'>

更新小提琴：https://jsfiddle.net/8jh2k8u8/4/

另一种方法是通过代码通过查找选择的无线电 (:checked) 来初始化父级：

var startup = $(".feed input[type=radio]:checked").first();
if (startup.length) {
    startup.closest("div").data("val", startup.val())
}

更新小提琴：https://jsfiddle.net/8jh2k8u8/5/

【讨论】：