jquery - 使用 jQuery 更改单选按钮/按钮的颜色 - Bootstrap3

Question

背景:

我正在开发一个 Web 元素，它使用 Bootstrap 3 和自定义主题。经过一些工作后，我已经能够构建一个带有单选元素的表单，该表单基于按钮进行操作。不幸的是，我无法做的是使用 jQuery 在用户单击按钮后更改按钮的实际颜色。

我已确定该问题是 data-toggle="buttons" 的问题，但不幸的是，当我删除此标签时，1) jquery 可以工作，但 2) 单选按钮会重新出现。

?#1) 如何删除 data-toggle="buttons"，但仍保持相同的按钮格式(不显示正常的单选按钮)，并更改颜色同一时间

?#2) 一旦设置了他们单击的第一个按钮的颜色，如果他们单击另一个按钮，我如何将原始按钮显示重置回页面加载的方式....理论上我可以使用jquery单击 5 后重置所有按钮 1-4 颜色，然后单击 1 后重置按钮 2-5 颜色...但这似乎令人费解且落后

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

如果我正确理解了你的目标(如果我错了，请纠正我)

您的切换类将任意删除该类，然后重新添加它。这是没有必要的。您不需要使用引导单选按钮执行任何 JavaScript...只需修改 CSS。 Bootstraps 处理程序将处理添加和删除事件类。然后，您只需在 CSS 中定义基色和事件颜色即可:

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

当我有仅位于特定位置且与默认值不同的自定义单选按钮时，我会创建一个具有不同颜色的自定义类，例如

.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; }