Question

鉴于以下代码。如何创建每个选项按钮作为同一按钮无线电组的一部分？

<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 =＆＃34; buttons-radio＆＃34;每个按钮，但不起作用。

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

Answer 1

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

请参阅jsfiddle

Answer 2

您需要做的就是包含来自here的bootstrap-button.js，它应该完成其余工作。

请查看演示here

编辑：对于这种特殊情况，btn-group附近的文本会消失，因为bootstrap会在btn组内将font-size设置为0px。如果需要将文本放在btn-group中，则可以使用标签。

DEMO已更新

我希望这会有所帮助

创建一个twitter bootstrap拆分按钮无线电组

2 个答案: