• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

182
Vistas
Add a checkbox inside Bootstrap 5 tabs

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>

almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda