Grupa przycisków Bootstrap działa niezależnie - twitter-bootstrap, twitter-bootstrap-3

Na mojej stronie internetowej jest pasek przycisków wykonany przy użyciu bootstrapu.

Mam zestaw 3 przycisków, a następnie dwóch. Pierwsze trzy muszą być niezależne. tzn. mogę wybrać jeden, dwa lub trzy z nich. Drugi zestaw dwóch działa zgodnie z wymaganiami, jeśli jeden zostanie wybrany, drugi nie.

Funkcje pierwszych trzech nie działają i nie jestem pewien, dlaczego. Są w osobnych grupach przycisków o różnych identyfikatorach

Jakieś pomysły? Oto kod:

<div class="row" style="margin-top: -4px;">
<div class="col-xs-9" style="padding-right: 0px;">
<div class="col-xs-4" style="padding: 0px;">
<div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-primary">Open now</button>
</div>
</div>
</div>
<div class="col-xs-4" style="padding: 0px;">
<div id="freeOnlyBtn" class="btn-group btn-group-justified" role="group" aria-label="2">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-primary">Free only</button>
</div>
</div>
</div>
<div class="col-xs-4" style="padding: 0px;">
<div id="18PlusBtn" class="btn-group btn-group-justified" role="group" aria-label="3">

<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-primary">18+</button>
</div>
</div>
</div>
</div>
<div class="col-xs-3" style="padding-left: 0px;">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-info"><i class="fa fa-th" style="padding-top: 3px; padding-bottom: 3px;"></i></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-info"><i class="fa fa-list" style="padding-top: 3px; padding-bottom: 3px;"></i></button>
</div>
</div>
</div>

Odpowiedzi:

Możesz to zrobić za pomocą: pola wyboru dla wielu i wejścia radiowe na singla.

<div class="container-fluid">
<div class="col-xs-9">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked>Open now</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">Free only</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">+18</label>
</div>
</div>
<div class="col-xs-3">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio" name="options" id="option2" autocomplete="off">On</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option3" autocomplete="off">Off</label>
</div>
</div>
</div>

co powiesz na to, zamień wyświetlany tekst na przyciskach na pole wyboru podobne do tego:

Z:

<div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-primary">Open now</button>
</div>
</div>

Do:

<div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1"  data-toggle="buttons">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-primary">
<input type="checkbox" autocomplete="off" checked>Display Text
</button>
</div>
</div>

Pracował dla mnie!