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-group div 中，但这不起作用。我也尝试将 data-toggle="buttons-radio" 添加到每个按钮，但这不起作用。

目标是为只有一个按钮处于活动状态的计划提供一个选择器按钮。这是否必须使用自定义 jquery 来完成，或者可以通过 twitter bootstrap 中的按钮组和按钮收音机来完成？

4

2 回答 2

1

您需要做的就是从这里包含 bootstrap-button.js ，它应该会处理其余的事情。

请在此处找到演示

编辑：对于这种特殊情况，btn 组附近的文本会消失，因为引导程序在 btn 组内将字体大小设置为 0px。如果需要将文本放置在 btn-group 中，则可以使用标签代替。

演示更新

我希望这有帮助

于 2012-10-08T19:40:17.530 回答
1

您要做的只是使用 JQuery 并将类“.active”添加到您单击的按钮，然后检查其中哪一个具有“.active”类 onSubmit。

见jsfiddle

于 2012-10-08T19:35:23.663 回答