创建 twitter bootstrap 拆分按钮单选组答案

【问题标题】：Creating a twitter bootstrap split button radio group创建 twitter bootstrap 拆分按钮单选组
【发布时间】：2012-09-29 01:38:18
【问题描述】：

鉴于下面的代码。如何将每个选项按钮创建为同一个按钮单选组的一部分？

<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 中的按钮组和按钮收音机来完成？

【问题讨论】：

@ajkochanowicz 正如我的帖子所说，我尝试将它放在按钮组中但没有用......这是提供的基本代码。是的，它们被分成不同的井。
"...每个选项按钮...单选组"。当没有单选按钮时，很难形成一组单选按钮。
@Beetroot-Beetroot 每个按钮都是无线电组的一部分。我只希望一个按钮一次处于活动状态，并认为我可以使用 Twitter Bootstrap 提供的按钮 - 无线电数据 - 切换
啊，我明白了。我不会尝试提供答案，因为下面至少已经有一个很好的答案了。

标签： jquery twitter-bootstrap

【解决方案1】：

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

请找demohere

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

演示更新

希望对你有帮助

【讨论】：

这几乎可以工作，但是这样做时价格会被删除。知道为什么吗？
Bootstrap 在其源代码的第 3438 行附加了一个 font-size:0，因此
标签不可见。在那个地方使用标签（而不是 p）应该这样做或手动设置字体。
虽然这似乎在一开始就有效......但对我的情况来说并不完全可靠。

【解决方案2】：

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

见jsfiddle

【讨论】：

虽然@16dots 的答案是正确的，但就用户体验而言，我会三思而后行地实施这种 UI，因为对于那些在选择时可能看不到其他项目未选择的用户来说，这可能会让人非常困惑另一个项目。
@16dots 这是我认为我必须做的。布局基本上是一个价格表，其中向用户展示了网站计划的所有选项。他们点击他们想要的选择，然后所有其他人都被取消选择。感谢您确认这是我需要做的