从引导按钮组中删除活动类答案

【问题标题】：Remove active class from bootstrap button group从引导按钮组中删除活动类
【发布时间】：2021-06-10 02:21:11
【问题描述】：

我正在尝试从按钮组中删除引导 active 类。

这是html代码

<div class="btn-group rounded-pill" data-toggle="buttons">
        <label class="btn btn-outline-secondary btn-md active rounded-left">
                        <input type="radio" name="options" id="option1" value="cadpaymentform" checked> <b>Purchase</b>
                    </label>
        <label class="btn btn-outline-secondary rounded-right btn-md">
                        <input type="radio" name="options" id="option2" value="license"> <b>My license key</b>
                    </label>
      </div>

这是我尝试过的 jquery 代码，它删除了活动类，但是当页面完全加载时，它再次添加活动类。

$('.btn-group').find('.btn-outline-secondary').removeClass('active');

【问题讨论】：

嗨，你试过this方式吗？

标签： jquery twitter-bootstrap bootstrap-4

【解决方案1】：

使用$(window).on('load', function() {}) 来实现这一点。它会起作用的。另一个问题是您默认选中该复选框，因此它被视为按钮组的活动类。

$(window).on('load', function() {
        $('.btn-group').find('.btn-outline-secondary').removeClass('active');
    });

<html lang="en">
<head>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group rounded-pill" data-toggle="buttons">
        <label class="btn btn-outline-secondary btn-md active rounded-left">
                        <input type="radio" name="options" id="option1" value="cadpaymentform" checked> <b>Purchase</b>
                    </label>
        <label class="btn btn-outline-secondary rounded-right btn-md">
                        <input type="radio" name="options" id="option2" value="license"> <b>My license key</b>
                    </label>
      </div>
  

</body>
</html>

【讨论】：

【解决方案2】：

您好，您应该尝试取消选中单选按钮，不要删除活动类，并检查您是否还包含 jquery 库

$(window).on('load', function(){
     
  $("input:radio[name='options']").each(function(i) {
     this.checked = false;
  });

});

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<div class="btn-group rounded-pill" data-toggle="buttons">
     <label class="btn btn-outline-secondary btn-md active rounded-left">
       <input type="radio" name="options" id="option1" value="cadpaymentform" checked> <b>Purchase</b>
     </label>
    <label class="btn btn-outline-secondary rounded-right btn-md">
       <input type="radio" name="options" id="option2" value="license"><b>My license key</b>
  </label>
 </div>

强调文字

【讨论】：