3

Bootstrap 3 を使用していて、2 つのボタンをラジオ ボタンとして機能させたいのですが、方法がわかりません。これが私のコードです

<div class="btn-group" >
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            PERSONAL
        </button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            COMPANY
        </button>
    </div>
</div>

PERSONAL を選択すると、もう一方の選択が解除されますが (そうあるべきです)、問題は次のとおりです。

  • フォームが開始されたときにそれらのどれもアクティブではありません
  • フォームの外をクリックすると両方の選択を解除できます
4

2 に答える 2

3 
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

そして、js で初期化します: JavaScript 経由でボタンを有効にします:

$('.btn').button()

ラベルに「アクティブ」クラスを追加して、そのうちの1つをアクティブにすることができます-「btn btn-primary active」および「checked」を入力ラジオに追加します。

于 2014-02-26T18:26:38.407 に答える
0

Bootstrap docsによると、今日ではより良い解決策があると思います：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

于 2021-11-10T14:20:26.930 に答える