A continuación te muestro cómo agregar estado checked a los elementos de un menu dropdown de Bootstrap
Bootstrap es un framework Open Source creado por Twitter que facilita el diseño web. En la lista de componentes facilitados por este genial framework tenemos el dropdown. Un dropdown permite mostrar una lista de opciones en un desplegable. El problema es que bootstrap no permite indicar si una opcion de la lista está checked (activada) o unchecked (desactivada). Para conseguir esto por nuestra cuenta vamos a necesitar un poco de css y javascript:
- La clase dropdown-item-checked añade un símbolo ‘✓’ a la izquierda de la opción, esto se consigue con CSS.
- Con HTML asociamos cada una de las opciones del dropdown a la clase option que nos servirá para capturar el evento click y añadimos la clase dropdown-item-checked a las opciones que queremos a checked por defecto.
- Javascript captura el evento click sobre las opciones y conmuta la clase dropdown-item-checked de la opcion sobre la que hemos hecho click. Cuando la opción no tiene la clase dropdown-item-checked el símbolo ‘✓’ desaparece y viceversa, cuando la opción tiene la clase dropdown-item-checked el símbolo ‘✓’ aparece de nuevo.
Código HTML
<div class="btn-toolbar"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" id="menu"> <li><a href="#" id="option-one" class="option dropdown-item-checked">My option one</a></li> <li><a href="#" id="option-two" class="option">My option two</a></li> <li><a href="#" id="option-three" class="option dropdown-item-checked">My option three</a></li> <li role="separator" class="divider"></li> <li><a href="#" id="option-five" class="option">My option five</a></li> </ul> </div> </div> </div>
Código CSS
.dropdown-item-checked::before { position: absolute; left: .4rem; content: '✓'; font-weight: 600; }
Código Javascript
$(".option").click(function(event){ event.preventDefault(); var id = $(this).attr('id'); $(this).toggleClass("dropdown-item-checked"); var isChecked = $(this).hasClass("dropdown-item-checked"); if (id == 'option-one') { if (isChecked) { // bla bla bla } } else if (id == 'option-two') { // bla bla bla } else if (id == 'option-three') { // bla bla bla } else if (id == 'option-four') { // bla bla bla } });
Aqui el código en jsfiddle