web-dev-qa-db-fra.com

Bootstrap les cases à cocher / radio ne modifient pas la valeur <input>

La page JavaScript pour Bootstrap montre une belle utilisation des boutons pour styliser les cases à cocher et les champs radio. Par exemple, pour une case à cocher, je pourrais écrire

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Option 1
  </label>
</div>

Cependant, la bibliothèque ne modifie pas réellement la valeur du <input> field - cela change juste si le <label> le champ a la classe active. Je m'attendais à ce qu'il change l'attribut checked de la case à cocher. Apparemment, je ne l'ai pas simplement mal configuré - c'est ainsi que fonctionnent les exemples sur le site Bootstrap.

Est-ce vraiment un comportement attendu? Si c'est le cas, cela semble assez inutile, car les gens vont vouloir utiliser le champ de la case à cocher. Sinon, comment configurer correctement Bootstrap cases à cocher/boutons radio?

javascripthtmltwitter-bootstrapcheckboxradio-button
19
jameshfisher

L'attribut checked sur l'entrée n'est pas modifié car ce n'est pas ce qui change lorsqu'une entrée de case à cocher est cochée - la propriété DOM checked est ce qui change (vrai ou faux), et = Bootstrap gère cela correctement (vous pouvez inspecter l'élément dans Firebug et voir la propriété DOM changer lorsque vous les basculez). L'attribut checked n'est utilisé que pour déterminer la valeur par défaut lorsque le DOM est initialement rendu.

S'il vous arrive de faire du js/jQuery avec des cases à cocher/radios, souvenez-vous de cela! Si vous devez cocher par programme une case à cocher ou un bouton radio, $('input').attr('checked', 'checked'); ne fera pas le travail. $('input').prop('checked', true); est ce dont vous avez besoin.

Ce n'est pas un comportement spécial pour les boutons Bootstrap, c'est ainsi que fonctionnent toutes les cases à cocher/radios.

Modifier: capture d'écran de Firebug

Édition 2: ajout du texte des commentaires, car cela semble utile.

36
tomaroo

Il semble que vous manquiez un appel pour "activer" le btn-group ( documentation ). Voici ne démo de ce travail:

<form id='testForm'>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
            <input type="checkbox" name='Option' value='1' />Option 1</label>
    </div>
</form>
<button class='btn' id='actionSubmit'>Submit</button>

<script>
    $('#actionSubmit').on('click', function (e) {
        e.preventDefault();
        alert($('#testForm').serialize());
    });

    $('.btn-group').button();
</script>
2
Jason Sperske

Je le fais comme ça pour MVC.NET au cas où quelqu'un en aurait besoin:

@{       
    var removeSelected = Model.Remove == true ? "active" : "";
    var buttonText = Model.Remove == true ? "Add" : "Remove";

}

    @Html.HiddenFor(model => model.Remove)
    <div class="editor-field">
        <div class="btn-group" data-toggle="buttons-checkbox">
              <button type="button" id="RemoveButton" class="btn btn-primary @removeSelected" onclick="toggle();">@buttonText</button>  
        </div
    </div>


 function toggle() {
            var value = $("#Remove").val();
            if (value == "False") {
                $("#Remove").val("True");
                $("#RemoveButton").text("Add");
            }
            else {
                $("#Remove").val("False");
                $("#RemoveButton").text("Remove");
            }            
        }

Et enfin n'oubliez pas d'ajouter la référence bootstrap js.

1
Sanchitos