Bootstrap单选按钮组：选中项背景色修改失败求助

首先，核心问题找到了：你当前的代码是在修改隐藏的<input>元素的类，但实际承载样式的是它的父级<label>标签！你的.btn-primary和.btn-primary-conf类都加在label上，而input被.rhidden类隐藏了，所以修改input的类自然看不到任何效果。

接下来给你两种解决方案，你可以根据需求选择：

方案1：手动修改label的样式类（适配你当前的自定义类） #

修正你的JavaScript代码，找到radio对应的label元素再修改样式：

$(document).ready(function() {
  var rl = 1; //result[17];
  if (rl == 1) {
    // 获取目标radio对应的label标签
    const targetLabel = $('#EditRoomLevel_1').closest('label');
    // 设置radio为选中状态
    $('#EditRoomLevel_1').prop('checked', true);
    
    // 先重置所有同级radio的label样式，避免多个选中状态残留
    $('label:has(input[name="EditRoomLevel"])').removeClass('btn btn-primary-conf').addClass('btn btn-primary');
    // 给选中的label设置高亮样式
    targetLabel.removeClass('btn btn-primary').addClass('btn btn-primary-conf');
  }
});

关键改动说明： #

• 用closest('label')定位到承载样式的父标签，而不是操作隐藏的input
• 先重置所有同组label的样式，确保只有选中项有特殊背景色
• 包裹在$(document).ready()里，确保DOM加载完成后再执行代码

方案2：利用Bootstrap原生的.active类（更简洁，推荐） #

Bootstrap的按钮式单选框本身会给选中的label自动添加.active类，我们可以直接复用这个机制，不用手动维护自定义类：

首先修改你的CSS，把选中状态的样式合并到.btn-primary.active：

.btn-primary {
  color: #333333;
  background-color: #CCCCCC;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 11px;
  width: 175px;
  text-align: center;
  height: 13px;
  border-radius: 0 !important;
  border: 0.5px solid #CCC !important;
  margin-top: 1px;
}

/* 复用Bootstrap的active类定义选中状态 */
.btn-primary.active {
  background-color: #B7FFBA;
  /* 其他样式继承.btn-primary，无需重复写 */
}

然后简化你的JavaScript代码，直接触发label的点击事件，让Bootstrap自动处理状态：

$(document).ready(function() {
  var rl = 1; //result[17];
  if (rl == 1) {
    // 触发label的点击事件，Bootstrap会自动给它添加.active类并选中radio
    $('#EditRoomLevel_1').closest('label').trigger('click');
  }
});

为什么推荐这个方案？ #

• 符合Bootstrap的设计规范，减少手动维护状态的代码
• 自动处理单选框的互斥逻辑，无需手动重置其他label的样式

额外注意事项： #

1. 确保你的JS代码在DOM完全加载后执行（用$(document).ready()包裹），否则可能找不到目标元素
2. 检查.rhidden类的样式，确保它只是隐藏input，不会阻碍label的点击交互

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