引导不可选择的单选按钮答案

【问题标题】：bootstrap unselectable radio button引导不可选择的单选按钮
【发布时间】：2012-09-11 18:33:23
【问题描述】：

我有这个 btn 组：

            <div class="control-group">
                <label class="control-label">Sex</label>
                <div class="controls">
                    <input id="filtro_sexo" type="hidden" />
                    <div class="btn-group" data-toggle-name="filter_sex" data-toggle="buttons-radio">
                        <button value="Male" type="button" class="btn">Male</button>
                        <button value="Female" type="button" class="btn">Female</button>
                    </div>
                </div>
            </div>

问题是我需要用户能够选择或取消选择该选项。用户应该能够选择一个选项，或者没有。但 data-toggle = "buttons-radio" 不会让我取消选中的选项。

【问题讨论】：

有什么理由不使用？
上面的代码会给你两个按钮而不是单选按钮。对于单选按钮，请尝试使用 <input type="radio" name="" value""/>
客户希望这样，因为它将在触摸环境中运行

标签： button twitter-bootstrap radio

【解决方案1】：

我通过使用 [data-toggle=buttons-checkbox] 来实现这一点，添加自定义属性 [data-single-select]，并编写几行 jQuery：

HTML：

<div class="btn-group" data-toggle="buttons-checkbox" data-single-select>
    <button class="btn">...</button>
    <button class="btn">...</button>
    <button class="btn">...</button>
</div>

jQuery:

$("[data-toggle='buttons-checkbox'][data-single-select] .btn").live('click', function(evt){
    $(this).siblings().removeClass('active');
});

@拉斐尔使用 [input type="radio"] 看起来太难看了。这就是我们使用 Bootstrap 的原因。

【讨论】：