Bootstrap 3.3.7 button groups - only 1 button can be clicked-Twitter bootstrap

odedta
April 10, 2018
153 views
4 votes
4 Answers

I have a form with 2 button groups, I would like to be able to select an option from both groups.

Here is my code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
    <legend>Card Type</legend>
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Visa</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Master</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Amex</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Discover</button>
        </div>
        <input type="hidden" name="card_type" value=""/>
    </div>
</fieldset>
<fieldset id="ticket_type_fieldset">
    <legend>Ticket Type</legend>
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Regular</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">VIP</button>
        </div>
        <input type="hidden" name="ticket_type" value=""/>
    </div>
</fieldset>

Tags: javascript twitter-bootstrap

Answers

- IgnacioAra
- April 10, 2018 at 4:59 pm
- 0 votes
0
I assume you’re using buttons as options (unique or multiple), isn’t it? Please check:
- radio buttons (unique)
- checkboxes (multiple)
Then with CSS you can make them appear to be buttons if you want that style that you’ve shown in your snippet.

Boostrap components: https://getbootstrap.com/docs/3.3/components/
Link with examples: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
Login or Signup to reply.

One option is:

Note: I moved the hidden input outside the div.btn-group to have a nice border radius on the button group.

$('button').click(function() {

  //Remove class selected on all buttons
  $(this).parents('fieldset').find('button').removeClass('selected');

  //Add class the clicked button
  $(this).addClass('selected'); 

  //Update the hidden field of the value    
  $(this).parents('fieldset').find('input[type="hidden"]').val( $(this).text() );

})

.selected {
  background-color: red!IMPORTANT;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
  <legend>Card Type</legend>
  <div class="btn-group btn-group-justified" role="group">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Visa</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Master</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Amex</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Discover</button>
    </div>
  </div>
  <input type="hidden" name="card_type" value="" />
</fieldset>
<fieldset id="ticket_type_fieldset">
  <legend>Ticket Type</legend>
  <div class="btn-group btn-group-justified" role="group">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Regular</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">VIP</button>
    </div>
  </div>
  <input type="hidden" name="ticket_type" value="" />
</fieldset>

Using Bootstrap 4

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Doc: Radio Buttons

In this case, I would like to use a checkbox.
you can then do some css to fit the checkbox.
your code will be

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
    <legend>Card Type</legend>
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Visa</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Master</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Amex</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Discover</button>
        </div>
        <input type="hidden" name="card_type" value=""/>
    </div>
</fieldset>
<fieldset id="ticket_type_fieldset">
    <legend>Ticket Type</legend>
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Regular</button>
<INPUT TYPE="Checkbox" Name="Browser" ID="C1" Value="Firefox">
        </div>
        <div class="btn-group" role="group">
            <button type="checkbox" class="btn btn-default">VIP</button>
<INPUT TYPE="Checkbox" Name="Browser" ID="C1" Value="Firefox">
        </div>
        <input type="hidden" name="ticket_type" value=""/>
    </div>
</fieldset>

please remember that I have edited only last two buttons.
thanks

To achieve expected result, use below option of using click event and adding class

$("#card_type_fieldset .btn").click(function() {
  $("#card_type_fieldset .clicked").removeClass("clicked")
  $(this).addClass("clicked");
});

$("#ticket_type_fieldset .btn").click(function() {
  $("#ticket_type_fieldset .clicked").removeClass("clicked")
  $(this).addClass("clicked");
});

code sample – https://codepen.io/nagasai/pen/yKZZLd

$("#card_type_fieldset .btn").click(function() {
  $("#card_type_fieldset .clicked").removeClass("clicked")
  $(this).addClass("clicked");
});

$("#ticket_type_fieldset .btn").click(function() {
  $("#ticket_type_fieldset .clicked").removeClass("clicked")
  $(this).addClass("clicked");
});

.clicked {
    color: #333;
    background-color: #e6e6e6 !important;
    border-color: red !important
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
    <legend>Card Type</legend>
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Visa</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Master</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Amex</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Discover</button>
        </div>
        <input type="hidden" name="card_type" value=""/>
    </div>
</fieldset>
<fieldset id="ticket_type_fieldset">
    <legend>Ticket Type</legend>
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Regular</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">VIP</button>
        </div>
        <input type="hidden" name="ticket_type" value=""/>
    </div>
</fieldset>

Please signup or login to give your own answer.

Click here to cancel reply.

Bootstrap 3.3.7 button groups – only 1 button can be clicked-Twitter bootstrap

Answers