बूटस्ट्रैप चेकबॉक्स/रेडियो बटन <input> मूल्य

Question

JavaScript page for Bootstrap स्टाइल चेकबॉक्स और रेडियो फ़ील्ड शैली के कुछ अच्छे उपयोग दिखाता है। उदाहरण के लिए, एक चेकबॉक्स के लिए, मैं लिख सकते हैं

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

हालांकि, पुस्तकालय वास्तव में अंतर्निहित <input> फ़ील्ड का मान नहीं बदलता है - यह सिर्फ बदल जाता है कि क्या <label> क्षेत्र वर्ग active है। मुझे लगता है कि यह चेकबॉक्स पर checked विशेषता को बदलने की उम्मीद करता। जाहिर है, मुझे बस गलत कॉन्फ़िगर नहीं किया गया है - बूटस्ट्रैप साइट पर उदाहरणों का यह तरीका है।

क्या यह वास्तव में अपेक्षित व्यवहार है? यदि ऐसा है, तो यह काफी बेकार लगता है, क्योंकि लोग चेकबॉक्स फ़ील्ड का उपयोग करना चाहते हैं। यदि नहीं, तो मैं बूटस्ट्रैप चेकबॉक्स/रेडियो बटन को सही तरीके से कॉन्फ़िगर कैसे करूं?

Answer 1

इनपुट पर checked विशेषता संशोधित नहीं है क्योंकि है कि क्या जब एक चेकबॉक्स इनपुट चेक किया गया है में परिवर्तन नहीं है - checked डोम संपत्ति क्या (सही या गलत बदल जाता है), और बूटस्ट्रैप इसे ठीक से संभालता है (आप फ़ायरबग में तत्व का निरीक्षण कर सकते हैं और जब आप उन्हें टॉगल करते हैं तो DOM प्रॉपर्टी चेंज को देख सकते हैं)। checked विशेषता केवल डीओएम शुरू होने पर डिफ़ॉल्ट मान निर्धारित करने के लिए उपयोग की जाती है।

यह बूटस्ट्रैप बटन के लिए विशेष व्यवहार नहीं है, इस प्रकार सभी चेकबॉक्स/रेडियो काम करते हैं।

संपादित करें: Firebug screenshot

Answer 2

ऐसा लगता है कि आप btn-group (documentation) को "सक्रिय" करने के लिए कॉल खो रहे हैं। यहाँ इस काम के a demo है:

<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

मैं मामले किसी में MVC.NET के लिए इस तरह यह कर रहा हूँ यह की जरूरत है:

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

और अंत में भूल जाते हैं बूटस्ट्रैप js refence जोड़ने के लिए नहीं है।