Using radio buttons for tab control using bootstrap
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>