无法从引导按钮组中删除类答案

【问题标题】：Unable to remove class from bootstrap button groups无法从引导按钮组中删除类
【发布时间】：2017-01-07 00:50:19
【问题描述】：

我想要一个可切换的按钮组，因此使用标签和输入作为输入组。该功能是这样的，在单击禁用状态标签时，用户应该看到禁用状态警报，然后禁用自身并切换以使另一个按钮处于活动状态。我注意到 Bootstrap 添加了活动的类，并专注于点击标签以使其看起来很活跃。所以我正在尝试删除这 2 个类的代码，但它似乎没有按预期工作。

<div id='btnGroupFrequencyCI' class="btn-group btn-group-justified" data-toggle="buttons">
      <label class="btn btn-custom border-radius-none notnowfeature disabled">
          <input type="radio" name="options" id="option1" autocomplete="off" value="monthly">Monthly
      </label>
       <label class="btn btn-custom border-radius-none active">
          <input type="radio" name="options" id="option2" autocomplete="off" value="annual"> Annual
       </label>
</div>

    $("#btnGroupFrequencyCI").on('click', function(){                      
       $(this).find('label.notnowfeature').removeClass('active').prop('active', false);  
       $(this).find('label').not('.notnowfeature').addClass('active').prop('active', true);   
    });

【问题讨论】：

观察到的结果是什么？

标签： jquery twitter-bootstrap

【解决方案1】：

对此我有几件事要评论，第一个是 Bootstrap 触发“活动”类打开和关闭，但它没有“禁用”类的功能。所以你是对的，这需要通过 JavaScript 触发。另一件事是，如果您只留下“活动”类而没有像这样的“禁用”（注意我删除了“notnowfeature”类）：

    <label class="btn btn-custom border-radius-none ">
        <input type="radio" name="options" id="option1" autocomplete="off" value="monthly">Monthly
    </label>
     <label class="btn btn-custom border-radius-none active">
        <input type="radio" name="options" id="option2" autocomplete="off" value="annual"> Annual
     </label>

然后引导程序将在 btn 组标签之间“切换”“活动”类打开和关闭，但这些标签不会有您想要的“禁用”类。

话虽如此，您有两个选择，创建一个 CSS 规则来显示与引导程序“禁用”按钮相同的样式，方法是：

    label:not(.active) { 
        /* Put any style you want for the disabled label */ 
        color: red; 
    }

或者另一个选项将使用 JQuery 并添加/删除引导类“禁用/活动”（此 JavaScript 选项也可以在不更改其余代码的情况下工作）：

$("#btnGroupFrequencyCI").on('click', function(){                         
  //Cycle through each label inside #btnGroup and ask if they have those classes
  $(this).find('label').each(function(){            
    if(!$(this).hasClass('active')){
      $(this).removeClass('disabled');
      $(this).addClass('active');          
    }else{
      $(this).removeClass('active');
      $(this).addClass('disabled')
    }
  });       
});

注意：为了让这个示例工作，它必须只使用一个活动类，顺便说一句，我删除了你使用的另一个类“notnowfeature”，这是不必要的。

希望这会有所帮助！

【讨论】：