How to unselect button on click in a Bootstrap btn-group?

Question

I try to make a Bootstrap btn-group unselectable by clicking on a previously selected button with the following code :

$(document).ready(function() {
  $('label.btn').click(function(e) {
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="note_reactivity" class="btn-group notes" data-toggle="buttons">
  <label id="1" class="btn btn-primary">
    <input type="radio">1
  </label>
  <label id="2" class="btn btn-primary">
    <input type="radio">2
  </label>
  <label id="3" class="btn btn-primary">
    <input type="radio">3
  </label>
  <label id="4" class="btn btn-primary">
    <input type="radio">4
  </label>
</div>

The "active" class seems to be removed by my code on the click event but it reappears just after. Do you know how to do that ?

Answer 1

Your code doesn't work because there is still the underlying Bootstrap click event handler attached to the element that will put the active class back on the element right after you take it off. To get around this you can set a tiny delay on your code to ensure it happens after Bootstrap does it's own thing.

Also note that you need to manually de-select the underlying radio button as well as remove the class. Try this

$(document).ready(function() {
  $('.btn-group').on('click', 'label.btn', function(e) {
    if ($(this).hasClass('active')) {
      setTimeout(function() {
        $(this).removeClass('active').find('input').prop('checked', false);
      }.bind(this), 10);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div id="note_reactivity" class="btn-group notes" data-toggle="buttons">
  <label id="1" class="btn btn-primary">
    <input type="radio">1
  </label>
  <label id="2" class="btn btn-primary">
    <input type="radio">2
  </label>
  <label id="3" class="btn btn-primary">
    <input type="radio">3
  </label>
  <label id="4" class="btn btn-primary">
    <input type="radio">4
  </label>
</div>