javascript - 仅单击一行中的一个项目

Question

当我至少选择了一个按钮时，是否可以连续禁用其他按钮？

$('.bet-offer div.option').click(function(){
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    } else {
        $(this).addClass('selected');
    }
});    

结果应该是用户可以点击一行中的任何按钮，但是一旦点击，该行上的其他项目应该已经被禁用。但是，用户仍然可以从其他行的其他项目中选择按钮。

这是示例 fiddle :http://jsfiddle.net/1vuf1gm7/3/

谢谢!

Answer 1

按钮只不过是父 div 中彼此的 sibling 。您可以使用 .siblings() 定位其他按钮并删除从中选择的类。

您还应该使用 .toggleClass() 而不是使用 hasClass 条件添加/删除:

$('.bet-offer div.option').click(function(){
  $(this).siblings('.option').removeClass('selected')
  $(this).toggleClass('selected')
});

Working demo