ट्विटर बूटस्ट्रैप बटन समूह नियंत्रण रेडियो बटन/चेकबॉक्स

Question

मैं Twitter Bootstrap button group का उपयोग फॉर्म इनपुट नियंत्रण के वास्तविक सेट के रूप में करने का प्रयास कर रहा हूं। डिफ़ॉल्ट रूप से, इन बटन समूहों को रेडियो बटन या चेकबॉक्स समूह की तरह काम करने के लिए बनाया जा सकता है, लेकिन चूंकि वे <button> तत्व का उपयोग करते हैं, इसलिए उन्हें वास्तव में रेडियो बटन या चेकबॉक्स की तरह उपयोग नहीं किया जा सकता है।

मेरे शोध में, मुझे this site मिला जो इन बूटस्ट्रैप बटनों को वास्तव में रेडियो बटन और चेकबॉक्स को नियंत्रित करने के लिए सीएसएस का उपयोग करता है। एकमात्र मुद्दा यह है कि वे काम करने के लिए सीएसएस की हाल की विशेषताओं का उपयोग करते हैं, और इसलिए, काम करने के लिए IE9 या ऊपर की आवश्यकता होती है।

मैं आईई 8 को समर्थन देना चाहता हूं। क्या कोई और (शायद जेएस नियंत्रित) समाधान है जो सीधी सीएसएस आवश्यकताओं के बिना उपरोक्त लिंक के समान सुविधाएं प्रदान करेगा?

आपके समय के लिए धन्यवाद।

Answer 1

बूटस्ट्रैप 3 एक "मूल" समाधान है अब ...

इस समस्या, पुराने ब्राउज़र पर भी ठीक से काम करने के लिए प्रकट होता है, जिसके लिए एक "सही" बूटस्ट्रैप समाधान है । यहाँ यह कैसा दिखाई देता है:

// get selection 
 
$('.colors input[type=radio]').on('change', function() { 
 
    console.log(this.value); 
 
});

<!-- Bootstrap CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="btn-group colors" data-toggle="buttons"> 
 
    <label class="btn btn-primary active"> 
 
    <input type="radio" name="options" value="red" autocomplete="off" checked> Red 
 
    </label> 
 
    <label class="btn btn-primary"> 
 
    <input type="radio" name="options" value="orange" autocomplete="off"> Orange 
 
    </label> 
 
    <label class="btn btn-primary"> 
 
    <input type="radio" name="options" value="yellow" autocomplete="off"> Yellow 
 
    </label> 
 
</div> 
 

 
<!-- jQuery and Bootstrap JS --> 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

अधिक जानकारी के लिए the relevant Bootstrap documentation देखें।

Answer 2

आप फॉर्म तत्व राज्यों को ट्रिगर करने के लिए बटन स्थिति का उपयोग करने के लिए छिपे हुए फॉर्म तत्वों और जावास्क्रिप्ट का उपयोग कर सकते हैं।

Answer 3

बूटस्ट्रैप 2

प्रयास करें this fiddle

HTML:

<div class="btn-group" data-toggle="buttons-radio"> 
    <button type="button" class="btn btn-primary">Left</button> 
    <button type="button" class="btn btn-primary">Middle</button> 
    <button type="button" class="btn btn-primary">Right</button> 
</div> 
<input type="hidden" id="buttonvalue"/> 

स्क्रिप्ट:

$(".btn-group button").click(function() { 
    $("#buttonvalue").val($(this).text()); 
}); 

,210

तो मिल buttonvalue सर्वर साइड

Answer 4

बूटस्ट्रैप 3.2 के साथ छुपा इनपुट आपके बटन समूह कंटेनर के बीच में डाल दिया। टेक्स्ट सामग्री के बजाय हम डेटा-वैल्यू फ़ील्ड का मान लेते हैं।

<div id="test" class="btn-group checkit" data-toggle="buttons-radio"> 
    <button type="button" data-value="1" class="btn btn-default active">Yes</button> 
    <input type='hidden' name="testfield" value='1'> 
    <button type="button" data-value="0" class="btn btn-default ">No</button> 
</div> 

अब सम्मिलित एक छोटे जावास्क्रिप्ट अपने टेम्पलेट की ऑनलोड भाग में झलकी।

$('.checkit .btn').click(function() { 
    $(this).parent().find('input').val($(this).data("value")); 
}); 

तो आपको केवल अपने बटन समूह में चेक करने और छिपी हुई इनपुट फ़ील्ड डालने की आवश्यकता है।

बूटस्ट्रैप 3 के साथ।2 आप रेडियो या चेकबॉक्स-आदानों

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-default"> 
     <input type="radio" name="options" id="option1" value="1" /> Yes 
    </label> 
    <label class="btn btn-default"> 
     <input type="radio" name="options" id="option2" value="0" /> No 
    </label> 
    <label class="btn btn-default"> 
     <input type="radio" name="options" id="option3" value="42" /> Whatever 
    </label> 
</div> 

के साथ सीधे बटन समूहों का उपयोग कर सकते हैं यहाँ देखें: http://jsfiddle.net/DHoeschen/gmxr45hh/1/

Answer 5

सीएसएस-एकमात्र समाधान:

HTML:

<div class="btn-group"> 
    <label class="btn btn-primary"><input type="checkbox"><span>Button 1</span></label> 
    <label class="btn btn-primary"><input type="checkbox"><span>Button 2</span></label> 
</div> 

एससीएसएस/कम:

label.btn { 
    margin-bottom: 0; 
    padding: 0; 
    overflow: hidden; 

    span { 
     display: block; 
     padding: 10px 15px; 
    } 

    input[type=checkbox] { 
     display: none; 
    } 

    input:checked + span { 
     display: block; 
     color: #fff; 
     background-color: #285e8e; 
    } 
    } 

JSfiddle here