使用jQuery-Bootstrap3更改单选/按钮的颜色 背景：

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

我已经将该问题确定为

data toggle=“buttons”

的问题，但不幸的是，当我删除此标记时，1）jquery工作，但2）单选按钮重新出现

？#1）如何删除

数据切换=“按钮”

，但仍保持相同的按钮格式（不显示正常单选按钮），同时更改颜色

？#2）设置他们单击的第一个按钮的颜色后，如果他们单击另一个按钮，我如何将原始按钮显示重置为页面加载方式。。。。理论上，我可以使用jquery在单击5后重置所有按钮1-4的颜色，然后在单击1后重置按钮2-5的颜色……但这看起来很复杂，而且是向后的

HTML:

---

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

您的切换类只是随意删除该类，然后重新添加它。这是没有必要的。您不需要使用引导单选按钮执行任何JavaScript…只需修改CSS即可。引导处理程序将处理添加和删除活动类的操作。然后，您只需要定义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; }

---

好的，那很好，但是我怎么能让它只影响网站这一部分的配色方案，而不影响其他区域？此页面上还将单独有多个“功能”，即

addseclvoptions

vs

changeSecLvl

。不幸的是，这段代码直接在`中，不希望它影响站点范围内的所有模态/pagewide@hawkhorrow，我添加了一篇关于添加具有不同颜色方案的自定义类的文章。这回答了这个问题吗？

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