Dreamwalker Dreamwalker - 5 months ago 85
HTML Question

Using radio buttons for tab control using bootstrap

I am trying to control tabs with radio buttons to change a content area for a scheduling screen. This works fine other than the radio buttons do not check.

Anyone got any ideas how to fix this?

<div>
<div>
<input id="optDaily" name="intervaltype" checked type="radio" data-target="#scheduleDaily" data-toggle="tab">
<label for="optDaily">Daily</label>
</div>
<div>
<input id="optWeekly" name="intervaltype" type="radio" data-target="#scheduleWeekly" data-toggle="tab">
<label for="optWeekly">Weekly</label>
</div>
<div>
<input id="optMonthly" name="intervaltype" type="radio" data-target="#scheduleMonthly" data-toggle="tab">
<label for="optMonthly">Monthly</label>
</div>
</div>

<div class="tab-content">
<div id="scheduleDaily" class="tab-pane active schedule-pane" >
Daily
</div>

<div id="scheduleWeekly" class="tab-pane schedule-pane" >
Weekly
</div>

<div id="scheduleMonthly" class="tab-pane schedule-pane" >
Montly
</div>
</div>


Here is the example in jsfiddle http://jsfiddle.net/nEWMq/

Answer

The radio buttons aren't getting checked because of this code:

e.preventDefault()

To fix this, remove data-toggle="tab" from the radio buttons and then add this jQuery code:

$('input[name="intervaltype"]').click(function () {
    $(this).tab('show');
});
Comments