CODEWITHSUNDEEP
twitter-bootstrap
BlairHippo
BlairHippo

Reputation: 9658

Bootstrap radio buttons not working across divs

I'm working on a Bootstrap-based application, and I'm trying to get sets of radio buttons to work across multiple rows. Unfortunately, it isn't working; when different buttons within the same set are placed in different rows, they don't behave properly.

How they fail depends on how, precisely, I try to implement them.

These buttons still show the radio button (which I don't want), and only one button may be pressed within the btn-group div, even though I've defined two different groups of buttons:

        <div class="btn-group" data-toggle="buttons">
            <div class="row">
                <div class="col-xs-6">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_1" value="1"/>Set 1, Option 1
                    </label>
                </div>
                <div class="col-xs-6">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_2" value="1"/>Set 2, Option 1
                    </label>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_1" value="2"/>Set 1, Option 2
                    </label>
                </div>
                <div class="col-xs-6">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_2" value="2"/>Set 2, Option 2
                    </label>
                </div>
            </div>
        </div>

These buttons look right, but once pressed, stay pressed.

        <div class="btn-group">
            <div class="row">
                <div class="col-xs-6" data-toggle="buttons">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_1" value="1"/>Set 1, Option 1
                    </label>
                </div>
                <div class="col-xs-6" data-toggle="buttons">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_2" value="1"/>Set 2, Option 1
                    </label>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6" data-toggle="buttons">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_1" value="2"/>Set 1, Option 2
                    </label>
                </div>
                <div class="col-xs-6" data-toggle="buttons">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_2" value="2"/>Set 2, Option 2
                    </label>
                </div>
            </div>
        </div>

So, how do I get these buttons to behave like radio buttons? Am I just misunderstanding what this feature is supposed to do?

Upvotes: 2

Views: 2461

Answers (2)

user2687506
user2687506

Reputation: 800

I had the same problem, googling around without finding any answers. Went into the CSS to see how they had solved it, and they used:

[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
  display: none;
}

Since I didn't use any radio-buttons anywhere without .btn, I added this to my code, and it worked like a charm:

.btn > input[type="radio"] {
  display: none;
}

If you are using radio buttons and want to have it in your buttons every now and then, just add a class and change .btn to that class whenever you want to hide the radio-button:

.btn-custom-home-made > input[type="radio"] {
  display: none;
}

Upvotes: 1

student
student

Reputation: 9

you can use this response :)

    <div class="well">
        <div class="btn-group" id="choice" data-toggle="buttons">
            <label class="btn btn-primary">
                <input type="radio" name="options" id="option1" value="1"> Option 1
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" id="option2"  value="2" > Option 2
            </label>

        </div>
    </div>

var value_check = $('input[type=radio][name=options]:checked').attr('value');

alert(value_check);

Upvotes: 0

Related Questions