Bootstrap case à cocher/boutons radio ne change pas <input> valeur

La Page JavaScript de Bootstrap montre quelques belle utilisation des boutons de style de cases à cocher et des champs radioélectriques. 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 fait pas changer la valeur du sous-jacent <input> champ -- il change juste de savoir si la <label> champ a de la classe active. Je me serais attendu à un changement de la checked attribut sur la case à cocher. Apparemment je n'ai pas l'avoir juste mal configuré -- c'est la façon dont les exemples sur le démarrage des travaux sur site.

Est-ce réellement le comportement attendu? Si oui, il semble assez inutile, car les gens vont vouloir utiliser le champ de case à cocher. Si non, comment dois-je configurer correctement Bootstrap cases à cocher/boutons radio?

  • Pour le moment ils ne changent pas pour de vrai... github.com/twbs/bootstrap/issues/14137
  • Ajout d'un attribut "nom" permet à la case de données pour être Posté, si c'est ce que vous espérez pour.
InformationsquelleAutor jameshfisher | 2013-08-22
  1. 36

    La checked l'attribut de l'entrée n'est pas modifié, car ce n'est pas ce qui change lorsque la case d'entrée est cochée -- le checked DOM est bien ce que les changements (vrai ou faux), et d'amorcer le gère correctement (vous pouvez inspecter l'élément dans Firebug et de voir les DOM changement de propriété lorsque vous basculez entre eux). Le checked attribut n'est utilisé que pour déterminer la valeur par défaut lorsque le DOM est d'abord rendu.

    Si jamais vous arrivez à faire en js/jQuery avec des cases à cocher/radios, ne l'oubliez pas! Si vous avez besoin d'en programmant de cocher une case à cocher ou un bouton radio, $('input').attr('checked', 'checked'); ne sera pas faire le travail. $('input').prop('checked', true); est ce que vous avez besoin.

    Ce n'est pas un comportement particulier pour Bootstrap boutons, c'est comment tous les case à cocher/radios travail.

    Edit: Firebug capture d'écran

    Edit 2: Ajout de texte à partir des commentaires, comme cela semble être utile.

    • Intéressant! Je n'avais pas réalisé que la distinction avant.
    • Si jamais vous arrivez à faire en js/jQuery avec des cases à cocher/radios, ne l'oubliez pas! Si vous avez besoin d'en programmant de cocher une case à cocher ou un bouton radio, $('input').attr('checked', 'checked'); ne sera pas faire le travail. $('input').prop('checked', true); est ce que vous avez besoin.
    • votre commentaire ci-dessus m'a sauvé à partir de 3 jours de tirer les cheveux. a l'aide de $('input').attr('checked', 'checked'); au lieu de $('input').prop('checked', true);. épargnant de vie!
    InformationsquelleAutor tomaroo
  2. 2

    Il semble que vous manquez un appel à "activer" le btn-group (la documentation). Voici une 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>
    • En fait ce n'est pas nécessaire. Les attributs de données de déclenchement de la bibliothèque sur leur propre. Supprimer la dernière ligne de JS dans votre démo ($('.btn-group').button()) et il fonctionne toujours.
    InformationsquelleAutor Jason Sperske
  3. 1

    Je fais comme ça pour MVC.NET dans le cas où quelqu'un en a 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 le bootstrap js référence.

    InformationsquelleAutor Sanchitos