Creating a twitter bootstrap split button radio group

Question

Given the code below. How can I create each options button as part of the same button radio group?

<div class="row">

    <div class="plan-option span3 well">
        <h3 class="plan-option-title">Product Name</h3>
        <div class="plan-pricing">
            <p class="plan-price">$x<span class="small"> one-time</span></p>
            <div class="signup-btn">
                <button type="button" class="btn-large btn-block btn" >select</button>
            </div>
        </div>
    </div>

    <div class="plan-option span3 well">
        <h3 class="plan-option-title">Product Name</h3>
        <div class="plan-pricing">
            <p class="plan-price">$x<span class="small"> one-time</span></p>
            <div class="signup-btn">
                <button type="button" class="btn-large btn-block btn" >select</button>
            </div>
        </div>
    </div>

    <div class="plan-option span3 well">
        <h3 class="plan-option-title">Product Name</h3>
        <div class="plan-pricing">
            <p class="plan-price">$x<span class="small"> one-time</span></p>
            <div class="signup-btn">
                <button type="button" class="btn-large btn-block btn" >select</button>
            </div>
        </div>
    </div>

    <div class="plan-option span3 well">
        <h3 class="plan-option-title">Product Name</h3>
        <div class="plan-pricing">
            <p class="plan-price">$x<span class="small"> one-time</span></p>
            <div class="signup-btn">
                <button type="button" class="btn-large btn-block btn" >select</button>
            </div>
        </div>
    </div>

</div>

I have tried wrapping everything in a btn-group div but that does not work. I have also tried adding data-toggle="buttons-radio" to each button but that does not work.

The goal is to have a selector button for the plans where only one of the buttons is active. Does this have to be done with custom jquery or can this be done via the button groups and buttons-radio from twitter bootstrap?

@ajkochanowicz as my post says, I have tried putting it in a button group but did not work... This is the base code provided. And yes they are split up in different wells. — bretterer
"... each options button ... radio group". It's hard to form a group of radio buttons when there are none. — Beetroot-Beetroot
@Beetroot-Beetroot Each button is part of the radio group. I only want one of the buttons to be active at a time and thought I could use the buttons-radio data-toggle that Twitter Bootstrap offers — bretterer
Ah, I see. I won't try to provide an answer as there's at least one good one below already. — Beetroot-Beetroot

16dots 16dots · Accepted Answer · 2012-10-08T19:35:23

What you want to do is just use JQuery and add class ".active" to the button that you clicked, then check which one of those has ".active" class onSubmit.

see jsfiddle

Creating a twitter bootstrap split button radio group

2 Answers