CODEWITHSUNDEEP
htmlformstwitter-bootstrapradio-button
martin.softpro
martin.softpro

Reputation: 443

bootstrap unselectable radio button

i have this 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>

the problem is that I need the user to be able to select or deselect the option. the user should be able to select one option, or none. but data-toggle = "buttons-radio" will not let me deselect the option selected.

Upvotes: 1

Views: 3791

Answers (1)

crab
crab

Reputation: 508

I achieve this by using [data-toggle=buttons-checkbox], add a custom attribute [data-single-select], and write few lines of 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 using [input type="radio"] looks way too ugly. That's why we use Bootstrap.

Upvotes: 1

Related Questions