Bootstrap onay kutusu/radyo düğmeleri

Question

JavaScript page for Bootstrap tarzı onay kutuları ve radyo alanlarına düğmelerinin bazı güzel kullanımını gösterir değerini değiştirmez. Örneğin, bir onay kutusu için, ben

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

Ancak kütüphane aslında altta yatan <input> alanın değerini değiştirmez yazabiliriz - sadece <label> alan sınıfını active olup olmadığını değiştirir. Onay kutusundaki checked özniteliğini değiştirmesini beklerdim. Görünüşe göre sadece yanlış yapılandırılmış değil - bu Bootstrap sitesinde çalışma örneklerini yoludur.

bu aslında beklenen davranış mı? Eğer öyleyse, insanlar onay kutusunu kullanmak isteyecek gibi oldukça işe yaramaz gibi görünüyor. Değilse, Önyükleme onay kutularını/radyo düğmelerini düzgün şekilde nasıl yapılandırabilirim?

Answer 1

: İşte bu çalışma a demo olduğunu) ve Bootstrap bunu düzgün bir şekilde ele alır (öğeyi Firebug'da denetleyebilir ve geçiş yaptığınızda DOM özelliği değişebilir). checked özniteliği, yalnızca DOM başlangıçta oluşturulduğunda varsayılan değeri belirlemek için kullanılır.

Bu Bootstrap düğmeleri için özel bir davranış değil, bu nasıl bütün onay kutusu/telsizler iştir.

Düzenleme:

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

Ve nihayet Bootstrap js refence eklemeyi unutma: Firebug screenshot

Answer 2

btn-group (documentation) "etkinleştirmek" için bir çağrı eksik gibi görünüyor. checked DOM özelliği (doğru veya yanlış ne gibi değişiklikler olduğunu - bu ne bir onay kutusu girişi işaretlendiğinde değişir olmadığından girişinde checked nitelik değiştirilmez

<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

Ben durumda herkes MVC.NET için böyle yapıyorum buna ihtiyacı var.