Bootstrap 3单选按钮组选中后颜色未切换问题求助

我之前也碰到过一模一样的情况，大概率是你的页面里缺少必要的依赖文件或者加载顺序出了问题，咱们一步步排查解决：

1. 确认Bootstrap JS和jQuery的引入顺序与完整性 #

Bootstrap的data-toggle="buttons"功能完全依赖JavaScript来处理按钮的状态切换，而且它必须在jQuery之后加载。你得确保：

• 先加载jQuery（版本要和Bootstrap 3兼容，比如1.9.1到3.x之间的版本），再加载Bootstrap的JS文件
• 两个文件都没有加载失败（可以通过浏览器F12的控制台或网络面板检查）

正确的加载示例：

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

2. 检查是否有自定义CSS覆盖了.active样式 #

有时候自己写的全局CSS会不小心覆盖Bootstrap按钮的激活状态样式。你可以打开浏览器开发者工具，点击按钮后查看对应的<label>元素：

• 如果标签没被加上.active类，说明JS没生效，回到第一步排查文件引入
• 如果.active类已经加上但样式没变化，那就是你的自定义CSS优先级更高。可以用更具体的选择器来修复：

.btn-group .btn-primary.active {
    background-color: #337ab7; /* 这里用Bootstrap默认的primary激活色，也可以换成你需要的颜色 */
    border-color: #2e6da4;
}

3. 排查是否有重复或冲突的JS文件 #

如果页面里重复引入了jQuery或者不同版本的Bootstrap JS，很可能会导致事件绑定失效。你可以查看页面源码，删掉多余的重复加载项。

4. 手动初始化按钮组（自动初始化失效时） #

如果上面的步骤都没问题，试试手动初始化这个按钮组，在页面加载完成后执行这段代码：

$(document).ready(function() {
    $('.btn-group[data-toggle="buttons"]').button();
});

按这个思路排查下来，应该就能解决点击按钮后样式不更新的问题了，你可以一个个试~

内容的提问来源于stack exchange，提问作者rostamiani