1

私はこの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>

問題は、ユーザーがオプションを選択または選択解除できるようにする必要があることです。ユーザーはオプションを 1 つ選択するか、何も選択しないようにする必要があります。しかし、 data-toggle = "buttons-radio" では、選択したオプションを選択解除できません。

4

1 に答える 1

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"] を使用する @Rafael はあまりにも醜く見えます。そのため、Bootstrap を使用します。

于 2013-01-08T19:22:53.707 に答える