Menu
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/
891
Creating radio buttons with Bootstrap 4 is very easy, you have to add the radio input class in your radio buttons. Alternatively, if you want to add new style in your radio buttons, then you can use the third-party plug-ins as well. Set up Bootstrap Library in Your Project
Bootstrap Jelly Radio Button Snippet Jelly radio Button is another adaptation of the Splat Radio Button configuration referenced previously. Since both the plans are from various developers, the code structure additionally shifts. In this one, the liveliness impact is somewhat intense than in the Splat Radio button.
The default styling being excessively plain and the plan being poor, utilizing Bootstrap radio catches to give the extra innovative touch to your sites. In this rundown, proficient developers have demonstrated a portion of their creative structures, that pursues the plan rules.
A group of three radio buttons is used that uses the radio class (by Bootstrap). The class is used in the div while input type radio is used inside the label tags. See the example/code online by clicking the link or image below:
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');
});
Bootstrap 4.3.1 working tabs as radio buttons
$(document).ready(function () {
$('input[name="intervaltype"]').click(function () {
$(this).tab('show');
$(this).removeClass('active');
});
})<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="nav nav-tabs" role="tablist">
<div>
<input id="optDaily" checked name="intervaltype" type="radio" data-target="#scheduleDaily">
<label for="optDaily">Daily</label>
</div>
<div>
<input id="optWeekly" name="intervaltype" type="radio" data-target="#scheduleWeekly">
<label for="optWeekly">Weekly</label>
</div>
<div>
<input id="optMonthly" name="intervaltype" type="radio" data-target="#scheduleMonthly">
<label for="optMonthly">Monthly</label>
</div>
</div>
<div class="tab-content">
<div id="scheduleDaily" class="tab-pane active">Daily</div>
<div id="scheduleWeekly" class="tab-pane">Weekly</div>
<div id="scheduleMonthly" class="tab-pane">Montly</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
