Hộp kiểm/nút radio Bootstrap không thay đổi <input> giá trị

Question

JavaScript page for Bootstrap hiển thị một số cách sử dụng tốt các nút để đánh dấu hộp kiểm và trường radio. Ví dụ, đối với một hộp kiểm, tôi có thể viết

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

Tuy nhiên, thư viện không thực sự thay đổi giá trị của nền tảng <input> lĩnh vực - nó chỉ thay đổi cho dù lĩnh vực <label> có lớp active. Tôi đã mong đợi nó thay đổi thuộc tính checked trên hộp kiểm. Rõ ràng tôi không chỉ có nó sai - đây là cách các ví dụ trên trang web Bootstrap làm việc.

Hành vi này có thực sự được mong đợi không? Nếu vậy, có vẻ như khá vô dụng, vì mọi người sẽ muốn sử dụng trường hộp kiểm. Nếu không, làm thế nào để cấu hình đúng các hộp kiểm Bootstrap/radio?

Answer 1

Các checked thuộc tính trên đầu vào không được sửa đổi bởi vì đó không phải là điều thay đổi khi một đầu vào hộp kiểm được kiểm tra - các tài sản checked DOM là những gì thay đổi (đúng hoặc sai), và Bootstrap xử lý đúng cách này (bạn có thể kiểm tra phần tử trong Firebug và xem thay đổi thuộc tính DOM khi bạn chuyển đổi chúng). Thuộc tính checked chỉ được sử dụng để xác định giá trị mặc định khi DOM được hiển thị ban đầu.

Đây không phải là hành vi đặc biệt đối với các nút Bootstrap, đây là cách tất cả các hộp kiểm/radio hoạt động.

Edit: Firebug screenshot

Answer 2

Có vẻ như bạn đang thiếu một cuộc gọi để "kích hoạt" btn-group (documentation). Dưới đây là a demo của làm việc này:

<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

tôi đang làm nó như thế này cho MVC.NET trong trường hợp bất cứ ai cần nó:

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

Và cuối cùng đừng quên để thêm bootstrap js refence.