Question

我正在开发一个功能，确保在我的按钮组中始终至少选择了一个按钮。它包含2个按钮，如果取消选择一个按钮并取消选中两个按钮，我想选择相反的按钮。我面临的问题是我可以取消选择这两个按钮，然后在下面的按钮上单击两个按钮：

按钮组：

<div class="container" style=" padding-top: 25px">
<div class="btn-group" data-toggle="buttons">
    <button type="button" class="btn btn-default" id="one">One</button>
    <button type="button" class="btn btn-default active" id="two">Two</button>
</div>

Jquery的：

    $("#one").click(function() {

    if (!($("#one").hasClass("active")) && !($("#two").hasClass("active"))){

        $("#two").addClass("active");
    }


});

$("#two").click(function() {

    if (!($("#one").hasClass("active")) && !($("#two").hasClass("active"))){

        $("#one").addClass("active");
    }


});

澄清：我希望始终至少一个按钮active。

Answer 1

如果您不介意副作用并声明：

var twoIsActive = true;
var oneIsActive = false;

$("#one").click(function() {
    oneIsActive = !oneIsActive;

  if(!oneIsActive && !twoIsActive){
    twoIsActive = true;
    $("#two").addClass("active");

  }
});

$("#two").click(function() {
    twoIsActive = !twoIsActive;
    if (!oneIsActive && !twoIsActive){
        oneIsActive = true;
        $("#one").addClass("active");
    }
});

所有这一切都是在内部跟踪按钮的状态（已选中，未选中），并且根据您的条件翻转相应的按钮。

http://www.bootply.com/l14oRAS7iG

Answer 2

您只考虑用户点击激活按钮的情况。请尝试以下方法：

$("#one").click(function() {
    $(this).toggleClass("active");
    if (!($("#one").hasClass("active")) && !($("#two").hasClass("active"))){

        $("#two").addClass("active");
    }

});

$("#two").click(function() {
    $(this).toggleClass("active");
    if (!($("#one").hasClass("active")) && !($("#two").hasClass("active"))){

        $("#one").addClass("active");
    }


});

http://jsfiddle.net/LKtYF/

Answer 3

修改你的JQuery作为点击第一个按钮检查的事件，如果两个都没有类active但是第二个按钮检查。

$("#one").click(function() {

    if (!($("#one").hasClass("active"))){//change in condition

        $("#two").addClass("active");
        $("#one").removeClass("active");
    }


});

$("#two").click(function() {

    if (!($("#one").hasClass("active"))){

        $("#one").addClass("active");
        $("#otwo


});

Answer 4

<div class="container-fluid" style=" padding-top: 25px">
   <div class="btn-group" data-toggle="buttons">
     <button type="button" class="btn btn-default" id="one">One</button>
     <button type="button" class="btn btn-default active" id="two">Two</button>
    </div>
</div>

找到当前按钮的最近div并删除所有元素的活动类。并将类添加到当前元素

$(".btn").click(function() {
  $(this).closest('.btn-group').find('.btn').removeClass('active');
  $(this).addClass('active');
  $(this).blur(function(){
    $(this).addClass('active');
  })
});

这是工作演示http://www.bootply.com/21QfRtg0Tk这是按预期工作的。一旦检查

始终在按钮组中至少选择一个按钮

4 个答案: