Remove active class from bootstrap button group

Question

I am trying to remove the bootstrap active class from the button group.

Here's the html code

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

this is the jquery code I have tried, it removed the active class but when the page is fully loaded it again add active class.

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

Hi, did you try [this](https://stackoverflow.com/questions/11936816/execute-function-after-complete-page-load) way ? — Swati, Mar 12 '21 at 04:53

Udhay Titus · Accepted Answer · 2021-03-12T05:04:17.517

use $(window).on('load', function() {}) to achieve this. It will work. One more issue is you are checked the check box by default, so it's taken as active class for the button group.

$(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>

score 0 · Answer 2 · answered Mar 12 '21 at 05:26

Hello you should try to uncheck the radio button not remove the active class and check that you include the jquery library also

$(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>

emphasized text

Remove active class from bootstrap button group

2 Answers2