Question

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

<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);   
    });

Answer 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>

然后bootstrap将在btn-group标签之间“切换”“活动”类，但这些标签不会有你想要的“禁用”类。

正如那样说，你有两个选择，创建一个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”的其他类，这是不必要的。

希望这有帮助！

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

1 个答案: