javascript - Bootstrap 3.3.7 按钮组 - 只能点击 1 个按钮

Question

我有一个包含 2 个按钮组的表单，我希望能够从两个组中选择一个选项。

这是我的代码:

<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>

Answer 1

一个选项是:

注意:我将 hidden 输入移到了 div.btn-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>

---

使用 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>

文档:Radio Buttons