WebDevGuy2 WebDevGuy2 - 3 months ago 19
CSS Question

Multiple button groups - selection issue

I have 2 DYNAMICALLY created bootstrap button groups. When I select a button it works. But, as soon as I select another button, in the OTHER group, it de-selects the original one. So basically I can only have ONE button selected, even though they are in different button groups. Any idea why? The button groups ids are unique.

<div class="container">
<h2>Button Group</h2>
<div class="btn-group" id="group1">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group" id="group2">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>

Answer

This will solve your problem.

<div class="container">
  <h2>Button Group</h2>
  <div class="btn-group" data-toggle="buttons">
    <label for="" class="btn btn-primary">
        <input type="radio" >Apple
    </label>
    <label for="" class="btn btn-primary">
        <input type="radio" >Samsung
    </label>
    <label for="" class="btn btn-primary">
        <input type="radio">Sony
    </label>
  </div>

  <div class="btn-group" data-toggle="buttons">
     <label for="" class="btn btn-primary">
        <input type="radio" >Apple
     </label>
     <label for="" class="btn btn-primary">
        <input type="radio" >Samsung
     </label>
     <label for="" class="btn btn-primary">
        <input type="radio" >Sony
     </label>
   </div>
</div>
Comments