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 ho

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:

Bootstrap 4.3.1 working tabs as radio buttons

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

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><divclass="nav nav-tabs"role="tablist"><div><inputid="optDaily"checkedname="intervaltype"type="radio"data-target="#scheduleDaily"><labelfor="optDaily">Daily</label></div><div><inputid="optWeekly"name="intervaltype"type="radio"data-target="#scheduleWeekly"><labelfor="optWeekly">Weekly</label></div><div><inputid="optMonthly"name="intervaltype"type="radio"data-target="#scheduleMonthly"><labelfor="optMonthly">Monthly</label></div></div><divclass="tab-content"><divid="scheduleDaily"class="tab-pane active">Daily</div><divid="scheduleWeekly"class="tab-pane">Weekly</div><divid="scheduleMonthly"class="tab-pane">Montly</div></div>

Solution 3:

Try this works for me

<scriptsrc="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script><linkhref="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"rel="stylesheet"type="text/css" /><divclass="container"><divclass="row"><divclass="span12"><pclass="lead">Bare minimum radio button tabs example:</p><divid="tab"class="btn-group"data-toggle="buttons"><ahref="#prices"class="btn btn-default active"data-toggle="tab"><inputtype="radio" />Prices</a><ahref="#features"class="btn btn-default"data-toggle="tab"><inputtype="radio" />Features</a><ahref="#requests"class="btn btn-default"data-toggle="tab"><inputtype="radio" />Requests</a><ahref="#contact"class="btn btn-default"data-toggle="tab"><inputtype="radio" />Contact</a></div><divclass="tab-content"><divclass="tab-pane active"id="prices">Prices content</div><divclass="tab-pane"id="features">Features Content</div><divclass="tab-pane"id="requests">Requests Content</div><divclass="tab-pane"id="contact">Contact Content</div></div></div></div></div>