Question

我有这个btn-group：

            <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的原因。

bootstrap unselectable单选按钮

1 个答案: