HTML Bootstrap Button Toggle

Question

I'm trying to untoggle the other buttons in the button group when clicking on a button in the group. For example, when a person clicks "E" it toggles the E button on and turns off the others.

I am doing this for multiple different button groups, but each one should be able to have an individual button active, is it also possible to make it work this way?

<div class="btn-group btn-group-toggle">

  <button class="btn btn-secondary acroTrained" data-toggle="buttons" autocomplete="off"> T </button>


  <button class="btn btn-secondary acroExpert" data-toggle="buttons" autocomplete="off"> E </button>


  <button class="btn btn-secondary acroMaster" data-toggle="buttons" autocomplete="off"> M </button>


  <button class="btn btn-secondary acroLegendary" data-toggle="buttons" autocomplete="off"> L </button>

</div>

Answer 1

Bootstrap 5 comes with that feature already, you can read more about that on this section of the docs: https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups

let radios = document.querySelectorAll('.btn-group.btn-group-unselectable input[type="radio"]');

radios.forEach(radio => {
  radio.addEventListener('click', function(e) {
    if (this.getAttribute('data-previous-value') == 'true') {
      e.target.checked = false;
    } else {
      radios.forEach(radio => {radio.setAttribute('data-previous-value', false)});
    }
    
    this.setAttribute('data-previous-value', e.target.checked);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="btn-group btn-group-unselectable" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">T</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">E</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">M</label>
  
    <input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio4">L</label>
</div>

EDIT

You can do this with some JavaScript code, you need to store a temp value on the element when click on radio buttons because every time you click on the radio it is set to checked, so we need to know the previous state of the checked attribute so when we click again we can know if the button is checked (active), if it is, we set to checked = false.

Also, i added the class .btn-group-unselectable to .btn-group element.

Here is the JQuery version of this code:

$('.btn-group.btn-group-unselectable input[type="radio"]').click(function(e) {
    if($(this).attr('data-previous-value') == 'true'){
        e.target.checked = false
    } else {
        $('input[type="radio"]').attr('data-previous-value', false);
    }

    $(this).attr('data-previous-value', e.target.checked);
});