Add a checkbox inside Bootstrap 5 tabs

Question

I intend to put a checkbox inside Bootstrap 5 tabs. The problem is that the checkbox is not selectable. If you enable the alert line on js panel, you will see the tabs script toggle the checkbox and won't let it be toggled.

I could make it work by using button tag instead of a, yet this can not be an option as the HTML code is rendered by a driver over which I don't have any control. I need to make it work by js or CSS.

Can anyone help?

const cbTab2 = document.getElementById("cb-tab-2");
cbTab2.addEventListener(
  "click",
  function (e) {
    // capture checkbox click
    // alert("captured");
    console.log("captured");
  }
);

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>


<ul class="nav nav-pills"  id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="tab-1" data-bs-toggle="pill" data-bs-target="#tab-1-content" type="button" role="tab">Tab 1</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="tab-2" data-bs-toggle="pill" data-bs-target="#tab-2-content" type="button" role="tab">
      <input type="checkbox" id="cb-tab-2" name="cb-tab-2">
      Tab 2
    </a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane active" id="tab-1-content" role="tabpanel">Tab 1 Content</div>
  <div class="tab-pane" id="tab-2-content" role="tabpanel">Tab 2 Content</div>
</div>

Add a checkbox inside Bootstrap 5 tabs

0 Answers0