javascript按钮一次只能切换一个答案

【问题标题】：javascript button toggle only one at a timejavascript按钮一次只能切换一个
【发布时间】：2016-01-22 19:21:12
【问题描述】：

我正在尝试使用按钮来过滤页面中的元素列表。

到目前为止，如果单击其中一个按钮，则所有其他按钮都将被禁用，然后如果我单击另一个按钮，则只有该按钮将被启用，而其他按钮将被禁用。

我不知道如何切换它，所以如果按钮已经处于活动状态，它将取消禁用所有按钮，包括它自己。

html:

<div class="calendar-filter">
    <a href="#" class="dnco calendar-color-key btn btn-raised"><i class="material-icons"></i>Duty NCO</a>
    <a href="#" class="main calendar-color-key btn btn-raised"><i class="material-icons"></i>Main Cadets</a>
    <a href="#" class="wmt calendar-color-key btn btn-raised"><i class="material-icons"></i>Wing Marching Team</a>
    <a href="#" class="juniors calendar-color-key btn btn-raised"><i class="material-icons"></i>Juniors</a>
    <a href="#" class="exercise calendar-color-key btn btn-raised"><i class="material-icons"></i>Exercise</a>
    <a href="#" class="other calendar-color-key btn btn-raised"><i class="material-icons"></i>Other</a>
</div>

js:

function filterButtonClick(buttonClass) {
    $('.calendar-color-key').each(function() {
        $(this).addClass('disabled');

        if($(this).hasClass(buttonClass)) {
            $(this).removeClass('disabled');
        }
    });
}

$('.calendar-color-key').on('click', function() {
    var filterButtonClasses = this.classList;
    filterButtonClick(filterButtonClasses[0]);
});

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

$(".calendar-color-key").click(function() { //select by class
  var clicked = $(this);

  if (clicked.hasClass('toggle')) {
    $('.calendar-color-key').removeClass('disabled'); //enable all again  
    clicked.removeClass('toggle');
  } else {
    $('.calendar-color-key').removeClass('toggle');
    clicked.addClass('toggle');
    clicked.removeClass('disabled');
    $('.calendar-color-key').not(clicked).addClass('disabled'); //disable everything except clicked element
  }
});

https://jsfiddle.net/6kx8ncdb/2/

【讨论】：

谢谢，但这不起作用。当单击该按钮时，我试图在所有元素上切换 disabled 类，如果单击该按钮，则将活动按钮更改为另一个元素。
@georgehartlett 更新（因为您谈论的是disable，但它是一个class 称为禁用）。还在css 中添加了color 以使其更清晰
快到了！单击按钮并处于“活动状态”后，我希望能够再次单击它以取消禁用所有按钮，例如切换
太棒了，太棒了！非常感谢
@georgehartlett 看看这个错误

【解决方案2】：

为什么不为你的按钮使用一个类默认类，比如过滤按钮，所以当你想禁用它们时，只需使用：

$(".filter-button").addClass("disabled");

并且使用一个活跃的类这将是一个很大的帮助，所以你可以拥有

$(".active").on('click', function(){
    $(".filter-button").addClass("disabled");
    $(".active").removeClass("active");
});

更新：添加禁用时不要忘记删除活动类我更新了代码。

【讨论】：