Pole wyboru Bootstrap/przyciski opcji nie zmieniają się <input> wartość

Question

JavaScript page for Bootstrap pokazuje przyjemne użycie przycisków do zaznaczania pól wyboru i pól radiowych. Na przykład, w przypadku wyboru, mogę napisać

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

Jednak biblioteka faktycznie nie zmieni wartość <input> pola bazowego - po prostu zmienia się, czy pole <label> ma klasę active. Spodziewałam się, że zmieni atrybut atrybutu checked. Wygląda na to, że nie tylko nie jest źle skonfigurowany - tak działają przykłady na stronie Bootstrap.

Czy to rzeczywiście oczekiwane zachowanie? Jeśli tak, to wydaje się dość bezużyteczne, ponieważ ludzie będą chcieli użyć pola wyboru. Jeśli nie, w jaki sposób poprawnie skonfigurować pola wyboru Bootstrap/przyciski opcji?

Answer 1

Atrybut checked na wejściu nie jest modyfikowany, ponieważ nie jest to, co się zmienia, gdy jest zaznaczone pole wyboru wejście - własność checked DOM to, jakie zmiany (prawda czy fałsz), a Bootstrap obsługuje to poprawnie (możesz sprawdzić element w Firebug i zobaczyć zmianę właściwości DOM, gdy je przełączasz). Atrybut checked służy tylko do określenia wartości domyślnej, gdy DOM jest początkowo renderowany.

To nie jest specjalne zachowanie dla przycisków Bootstrap, tak działa wszystkie pola wyboru/radia.

Edit: Firebug screenshot

Answer 2

Wygląda na to, że brakuje połączenia z "aktywacją" btn-group (documentation). Oto a demo tej pracy:

<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

robie to tak dla MVC.NET na wypadek gdyby ktoś go potrzebuje:

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

I wreszcie nie zapomnij dodać bootstrap js porządkowy.