Tengo la intención de poner una casilla de verificación dentro de las pestañas de Bootstrap 5. El problema es que la casilla de verificación no se puede seleccionar. Si habilita la línea de alerta en el panel js, verá que el script de pestañas alterna la casilla de verificación y no permitirá que se alterne.
Podría hacer que funcione usando una etiqueta de button en lugar de a , pero esta no puede ser una opción ya que el código HTML lo representa un controlador sobre el cual no tengo ningún control. Necesito hacerlo funcionar por js o CSS.
¿Alguien puede ayudar?
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>