仅单击一行中的一个项目

Click one item on a row only

本文关键字：一个 项目 一行 单击      更新时间：2024-04-19

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

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

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

这是样品小提琴：http://jsfiddle.net/1vuf1gm7/3/

谢谢！

按钮在父div中只是兄弟姐妹。您可以使用.siblings()来瞄准其他按钮并从中删除所选的类。

此外，您应该使用.toggleClass()，而不是使用hasClass条件添加/删除：

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

工作演示

试试这样的东西：

$('.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类。

这将禁用同一行中的其他按钮，而其中一个按钮具有类别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');
        }
    });
相关文章：