La casella di controllo Bootstrap/i pulsanti radio non cambiano <input> valore

Question

Il JavaScript page for Bootstrap mostra un uso piacevole dei pulsanti per impostare caselle di controllo e campi radio. Ad esempio, per una casella di controllo, potrei scrivere

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

Tuttavia, la libreria non in realtà modificare il valore del sottostante <input> campo - cambia solo se il campo <label> ha classe active. Mi sarei aspettato che cambiasse l'attributo checked nella casella di controllo. Apparentemente non ho solo una configurazione errata - questo è il modo in cui funzionano gli esempi sul sito Bootstrap.

È questo comportamento effettivamente previsto? Se è così, sembra abbastanza inutile, visto che le persone vorranno usare il campo checkbox. In caso contrario, come configurare correttamente le caselle di controllo/i pulsanti di opzione Bootstrap?

Answer 1

L'attributo checked sull'ingresso non viene modificato perché non è ciò che cambia quando un ingresso casella è selezionata - la proprietà checked DOM è quello che cambia (vero o falso) e Bootstrap lo gestisce correttamente (puoi controllare l'elemento in Firebug e vedere la modifica della proprietà DOM quando li attivi). L'attributo checked viene utilizzato solo per determinare il valore predefinito quando il DOM viene inizialmente sottoposto a rendering.

Questo comportamento non è speciale per i pulsanti Bootstrap, questo è il modo in cui funzionano tutte le checkbox/radio.

Edit: Firebug screenshot

Answer 2

Sembra che manchi una chiamata per "attivare" il btn-group (documentation). Ecco a demo di questo lavoro:

<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

Lo sto facendo in questo modo per MVC.NET nel caso qualcuno ne ha bisogno:

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

E infine non dimenticate di aggiungere refence il bootstrap js.