Problemas con el Checkbox en “Bootstrap from Twitter”

A muchos les ha pasado que quieren usar el estilo Checkbox que vienen con Bootstrap y resulta que cuando lo ponen en un formulario pues “tachán” el formulario se ejecuta, claramente porqué es un button.

Aquí una sencillísima solución que liberará tus problemas.

Por ejemplo, un formulario con un check:

<form action="">
   <button data-toggle="button" class="btn btn-warning">Single Toggle</button><br>
   <input type="submit" value="Enviar Check">
</form>

Si ejecutamos esto veremos que el button “Single Toggle” será un checkbox estilo Bootstrap pero al hacer click para cambiarlo el formulario se ejecuta “TREMENDO PROBLEMA”. Ejemplo aquí: http://jsfiddle.net/juanmboehme/Dd2Mr/

Pues mirar que sencillo:

El Javascript:
$(document).ready(function($) {
    function BtnUpdate(btn, input) {
        btn.toggleClass('active', input.prop('checked'));
        btn.toggleClass('disabled');
    }

    $(document).live('change', '.btn-toggle input', function(e) {
        var input = $(e.target);
        var btn = input.parents('.btn-toggle');
        BtnUpdate(btn, input);     
    });     
}); 
El CSS:
.btn-toggle input {
    display: none;
} 
EL Formulario:
<form action="">
    <label class="btn btn-toggle btn-warning" for="check1">Single Toggle
    <input type="checkbox" id="check1">
    </label><br>
    <input type="submit" value="Enviar Check">
</form>

Que vemos:

  1. Que al cargar la página todo btn-toggle input estará oculto, es decir, todo lo que sea input dentro de un toggle no se verá.
  2. Que al cargar o cambiar de estado un btn-toggle se ejecutará un script que cambiará su css-class.

Se podría, para mejorar el Script, poner lo siguiente:

$(document).ready(function($) {
    function BtnUpdate(btn, input) {
        btn.toggleClass('active', input.prop('checked'));
        btn.toggleClass('disabled', input.prop('disabled'));
    }

    $(document).live('change', '.btn-toggle input', function(e) {
        var input = $(e.target);
        var btn = input.parents('.btn-toggle');
        BtnUpdate(btn, input);     
    });     
});

Aquí ponemos el check deshabilitado para que no se envíe. Su estado pasará de Check True a Check False igual que el anterior pero en este caso se deshabilita el input tambien. Ejemplo aquí: http://jsfiddle.net/juanmboehme/JDdGS/

Si puedes mejorar el Scrip siempre será bienvenido.

Anuncios