Using radio buttons for tab control using bootstrap

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?




Daily
Weekly
Montly

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

Solutions/Answers:

Solution 1:

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');
});

Solution 2:

Try this works for me

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div class="container">
	<div class="row">
		<div class="span12">
			<p class="lead">Bare minimum radio button tabs example:</p>

			<div id="tab" class="btn-group" data-toggle="buttons">
				<a href="#prices" class="btn btn-default active" data-toggle="tab">
                    <input type="radio" />Prices</a>
				<a href="#features" class="btn btn-default" data-toggle="tab">
                    <input type="radio" />Features</a>
				<a href="#requests" class="btn btn-default" data-toggle="tab">
                    <input type="radio" />Requests</a>
				<a href="#contact" class="btn btn-default" data-toggle="tab">
                    <input type="radio" />Contact</a>
			</div>

			<div class="tab-content">
				<div class="tab-pane active" id="prices">Prices content</div>
				<div class="tab-pane" id="features">Features Content</div>
				<div class="tab-pane" id="requests">Requests Content</div>
				<div class="tab-pane" id="contact">Contact Content</div>
			</div>
		</div>
	</div>
</div>

Related:  Bootstrap 4 card-deck with number of columns based on viewport

References