button - 引导不可选择的单选按钮

Question

我有这个 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" 不会让我取消选择所选选项。

Answer 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');
});

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