Question

背景

我正在开发一个使用bootstrap 3和自定义主题的Web项目。做了一点工作后，我已经能够构建一个带有无线电元素的表单，它基于按钮。不幸的是，我无法做的是使用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; }

使用jQuery - Bootstrap3更改Radio / Button的颜色

背景

HTML：

JQUERY：

1 个答案: