Case à cocher Bootstrap / boutons radio ne changent pas de valeur
page JavaScript de Bootstrap montre une bonne utilisation des boutons pour les cases à cocher de style et les champs de 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 change pas réellement la valeur de<input> field -- il change juste si le <label> champ a la classe active. Je me serais attendu à changer checked l'attribut sur la case à cocher. Apparemment, Je ne l'ai pas seulement mal configuré ... exemples sur le site Bootstrap.
ce comportement est-il réellement attendu? Si oui, il semble assez inutile, car les gens vont vouloir utiliser le champ de case à cocher. Si non, comment configurer correctement Bootstrap checkloxes / boutons radio?
3 réponses
checked attribut sur l'entrée n'est pas modifié parce que ce n'est pas ce qui change quand une entrée de case est cochée -- le checked la propriété DOM est ce qui change (vrai ou faux), et Bootstrap gère cela correctement (vous pouvez inspecter L'élément dans Firebug et voir le changement de propriété DOM lorsque vous les basculez). checked attribut n'est utilisé que pour déterminer la valeur par défaut lorsque le DOM est initialement Rendu.
si vous vous trouvez à faire n'importe quel js/jQuery avec cases à cocher / radios, rappelez-vous ceci! 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 spécial pour les boutons Bootstrap, c'est comme ça que fonctionnent toutes les cases à cocher/radios.
Edit: screenshot Firebug
Edit 2: texte ajouté à partir des commentaires, comme il semble être utile.
on dirait que vous manquez un appel pour "activer" le btn-group ( documentation). 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>
je suis en train de faire comme ceci 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 la refence bootstrap js.