Twitter Bootstrapボタングループコントロールラジオボタン/チェックボックス

Question

フォーム入力コントロールの実際のセットとしてTwitter Bootstrap button groupを使用しようとしています。デフォルトでは、これらのボタングループはラジオボタンやチェックボックスグループのように機能することができますが、要素は<button>であるため、ラジオボタンやチェックボックスのように実際には使用できません。

私の研究では、this siteが見つかりました。これらは、CSSを使用してこれらのブートストラップボタンを実際にラジオボタンとチェックボックスを制御するようにしています。唯一の問題は、最近のCSS機能を使用しているため、IE9以上が動作する必要があることです。

私はIE8にサポートを拡大したいと思います。急なCSS要件なしで上記のリンクと同じ機能を提供する別の（おそらくJSで制御される）ソリューションがありますか？

ありがとうございます。

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

非表示のフォーム要素とjavascriptを使用すると、ボタンの状態を使用してフォーム要素の状態をトリガできます。

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()); 
}); 

その後、取得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> 

テンプレートのonloadの一部に少しのJavaScriptスニペットを挿入します。

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

ボタングループに.checkitを追加し、非表示の入力フィールドを挿入するだけで済みます。

ブートストラップ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

CSSのみのソリューション：

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> 

SCSS/LESS：

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