Change Color of Radio/Button using jQuery - Bootstrap3

Question

Background:

I have a web project that I am developing which uses bootstrap 3 with a custom theme. After doing a little work, I have been able to build a form with radio elements, which acts based upon buttons. Unfortunately, what I am unable to do is use jQuery to change the actual color of the button once a user clicks on it.

I have identified the problem as being an issue with data-toggle="buttons", but unfortunately when I remove this tag, 1) the jquery works, but 2) the radio button reappears.

?#1) How can I remove the data-toggle="buttons", but still keep the same button format (without displaying the normal radio button), as well as change color at the same time

?#2) Once setting the color of the first button they click, if they click another button, how can I reset the original button display back to how the page was loaded.... in theory I could use jquery to reset all button 1-4 colors once 5 is clicked, and then reset button 2-5 colors once 1 is clicked...but that seems convoluted and arse-backwards

HTML:

<h4>Security Level Options:</h4>
<div class="btn-group" data-toggle="buttons" >
    <label id="addSecLvl1Label" class="btn btn-default btn-gradient btn-sm">
      <input type="radio" name="AddSecLvlOptions" id="addSecLvloption1">1 - Administrator</label>
    <label id="addSecLvl2Label" class="btn btn-default btn-gradient btn-sm">
      <input type="radio" name="AddSecLvlOptions" id="addSecLvloption2">2 - Accounting</label>
    <label id="addSecLvl3Label" class="btn btn-default btn-gradient btn-sm">
      <input type="radio" name="AddSecLvlOptions" id="addSecLvloption3">3 - Basic Dispatcher</label>
    <label id="addSecLvl4Label" class="btn btn-default btn-gradient btn-sm">
      <input type="radio" name="AddSecLvlOptions" id="addSecLvloption4">4 - Starting User</label>
    <label id="addSecLvl5Label" class="btn btn-default btn-gradient btn-sm">
      <input type="radio" name="AddSecLvlOptions" id="addSecLvloption5">5 - Driver</label>
</div>

JQUERY:

$('#addSecLvloption1').click(function() {
    $('#addSecLvl1Label').toggleClass('btn-default btn-primary');
});
$('#addSecLvloption2').click(function() {
    $('#addSecLvl2Label').toggleClass('btn-default btn-primary');
});
$('#addSecLvloption3').click(function() {
    $('#addSecLvl3Label').toggleClass('btn-default btn-primary');
});
$('#addSecLvloption4').click(function() {
    $('#addSecLvl4Label').toggleClass('btn-default btn-primary');
});
$('#addSecLvloption5').click(function() {
    $('#addSecLvl5Label').toggleClass('btn-default btn-primary');
});

Answer 1

If I understand your goal correctly (correct me if I'm wrong)

Your toggle classes are just going to arbitrarily remove the class and then re-add it. This is not necessary. You shouldn't need to be doing any JavaScript with the bootstrap radio buttons...only modify the CSS. Bootstraps handlers will handle adding and remove the active class. You, then, just need to define what the base color and active colors are in CSS:

.btn-primary { /* color when not active */ }
.btn-primary.active { /* color when radio is active */ }

When I have custom radio buttons that are only in a specific location and are different from the defaults, then I create a custom class that has different colors, e.g.

.btn.btn-radio { background-color:#FFF;border-color:#CCC;color:#333; }
.btn.btn-radio:hover { background-color:#EBEBEB;border-color:#ADADAD;color:#333; }
.btn.btn-radio.active { background-color:#9BB4C9;border-color:#285E8E;color:#000; }
.btn.btn-radio .badge { background-color:#333;color:#FFF; }