0

以下のコードが与えられます。同じボタンラジオグループの一部として各オプションボタンを作成するにはどうすればよいですか？

<div class="row">

    <div class="plan-option span3 well">
        <h3 class="plan-option-title">Product Name</h3>
        <div class="plan-pricing">
            <p class="plan-price">$x<span class="small"> one-time</span></p>
            <div class="signup-btn">
                <button type="button" class="btn-large btn-block btn" >select</button>
            </div>
        </div>
    </div>

    <div class="plan-option span3 well">
        <h3 class="plan-option-title">Product Name</h3>
        <div class="plan-pricing">
            <p class="plan-price">$x<span class="small"> one-time</span></p>
            <div class="signup-btn">
                <button type="button" class="btn-large btn-block btn" >select</button>
            </div>
        </div>
    </div>

    <div class="plan-option span3 well">
        <h3 class="plan-option-title">Product Name</h3>
        <div class="plan-pricing">
            <p class="plan-price">$x<span class="small"> one-time</span></p>
            <div class="signup-btn">
                <button type="button" class="btn-large btn-block btn" >select</button>
            </div>
        </div>
    </div>

    <div class="plan-option span3 well">
        <h3 class="plan-option-title">Product Name</h3>
        <div class="plan-pricing">
            <p class="plan-price">$x<span class="small"> one-time</span></p>
            <div class="signup-btn">
                <button type="button" class="btn-large btn-block btn" >select</button>
            </div>
        </div>
    </div>

</div>

すべてをbtn-groupdivでラップしようとしましたが、機能しません。また、各ボタンにdata-toggle = "buttons-radio"を追加しようとしましたが、機能しません。

目標は、ボタンの1つだけがアクティブになっているプラ​​ンのセレクターボタンを用意することです。これはカスタムjqueryで実行する必要がありますか、それともボタングループとボタンを介して実行できますか？twitterブートストラップからのラジオですか？

4

2 に答える 2

1

あなたがしたいのは、JQueryを使用して、クリックしたボタンにクラス「.active」を追加し、そのうちのどれが「.active」クラスonSubmitを持っているかを確認することです。

jsfiddleを参照してください

于 2012-10-08T19:35:23.663 に答える
1

ここからbootstrap-button.jsを含めるだけで、残りはすべて処理されます。

ここでデモを見つけてください

編集：この特定のケースでは、ブートストラップがbtnグループ内でfont-sizeを0pxに設定すると、btn-groupの近くのテキストが消えます。テキストをbtn-group内に配置する必要がある場合は、代わりにラベルを使用できます。

デモが更新されました

これがお役に立てば幸いです

于 2012-10-08T19:40:17.530 に答える