Question

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

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

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

以下是样本小提琴：http://jsfiddle.net/1vuf1gm7/3/

谢谢！

Answer 1

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

你也应该使用.toggleClass()代替使用hasClass条件添加/删除：

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

<强> Working demo

Answer 2

尝试这样的事情：

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

这将为所有未选择的选项添加disabled类。

Answer 3

当一个按钮具有类selected时，这将禁用同一行中的其他按钮：

$('.bet-offer div.option').click(function(){
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
            $(this).siblings().css('pointer-events', 'auto');
        } else {
            $(this).addClass('selected');
            $(this).siblings().css('pointer-events', 'none');
        }
    });

单击一行中的一个项目

3 个答案: