Question

我有一个scheduling app，我正在从svg过渡到html。我尝试复制的行为是一个图标列表，其中只有一个可以选择。如果单击选定的图标，则会取消选择，不会选择任何图标。

我有一个jsfiddle，我正在尝试设置适当的布局。对于HTML，我有：

<ul class="hour open" hour="17">
  <li class="shift">
    <label>
      <input type="radio" name="shift[1]"/>
      <img class="icon" src="http://dhappy.org/.../image/icon/hand/"/>
    </label>
  </li>
  ⋮

这会处理单个条目的选择，但如果在选中项目时单击该项目，则仍然无法选择该项目。我的代码是：

$('label').click( function( event ) {
  if( $(this).children( 'input' ).is( ':checked' ) ) {
     $(this).children( 'input' ).prop( { checked: false } )
  }
} )

这似乎每次点击都会被调用两次。一旦checked为false，然后为true。最终效果是按钮无法选择。我应该改变什么？

答案似乎没有解决我的核心问题，即如果点击它时选择单选按钮，我希望取消选中。

Answer 1

我检查了你的小提琴，你可以通过使用来解决这个问题 event.preventDefault()

$('label').click( function( event ) {
  event.preventDefault(); //Added
  if( $(this).children( 'input' ).is( ':checked' ) ) {
     $(this).children( 'input' ).prop( { checked: false } )
  }
});

更新：根据您的评论

$('label').click(function (event) {
        event.preventDefault();
        var ele = $(this).find('input');
        if (!ele.prop('disabled') && !ele.prop('checked'))   
                 $(this).find('input').prop('checked', true);
        else 
            $(this).find('input').prop('checked', false);    
    });
});

JSFiddle

Answer 2

你需要停止在无线电上传播点击事件，当你抓住标签时，它会变得更加轻快

 $(':radio').click(function(e){
        e.stopPropagation()        
 })

的 DEMO

取消选中单选按钮（如果已选中）

2 个答案:

JSFiddle