Bootstrap Kontrollkästchen/Radio-Tasten ändern nicht Wert

Question

Die JavaScript page for Bootstrap zeigt einige nette Verwendung von Schaltflächen zum Ankreuzen von Kontrollkästchen und Radio-Felder. Zum Beispiel für eine Checkbox, könnte ich

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

jedoch schreiben, wird die Bibliothek nicht tatsächlich den Wert des zugrunde liegenden <input> Feldes ändern - es ändert sich nur, ob die <label> Feldklasse active. Ich hätte erwartet, dass es das checked Attribut auf der Checkbox ändert. Anscheinend habe ich es nicht falsch konfiguriert - so funktionieren die Beispiele auf der Bootstrap-Seite.

Ist das tatsächlich erwartetes Verhalten? Wenn dem so ist, scheint es ziemlich nutzlos, da die Leute das Kontrollkästchen verwenden wollen. Wenn nicht, wie konfiguriere ich Bootstrap Checkboxen/Radio Buttons richtig?

Answer 1

Das checked Attribut auf den Eingang nicht geändert wird, weil das nicht das, was sich ändert, wenn ein Kontrollkästchen Eingabe überprüft wird - die checked DOM-Eigenschaft ist, welche Änderungen (wahr oder falsch), und Bootstrap behandelt dies richtig (Sie können das Element in Firebug untersuchen und die DOM-Eigenschaft ändern, wenn Sie sie umschalten). Das Attribut checked wird nur verwendet, um den Standardwert zu bestimmen, wenn das DOM zum ersten Mal gerendert wird.

Dies ist kein spezielles Verhalten für Bootstrap-Buttons, so funktionieren alle Checkboxen/Radios.

Edit: Firebug screenshot

Answer 2

Es sieht so aus, als ob Sie einen Anruf zum "Aktivieren" der btn-group (documentation) verpassen. Hier ist a demo dieser Arbeits:

<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> 

Answer 3

ich es so für MVC.NET falls jemand tue es braucht:

@{  
    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"); 
      }    
     } 

Und schließlich nicht zu vergessen die Bootstrap-js refence hinzuzufügen.