点击切换Bootstrap按钮背景色并隐藏单选按钮问题求助

问题分析 #

原代码存在以下关键问题：

• 错误将颜色值作为类名使用（CSS类名不能以#开头）
• 选择器$("#cd6133")无对应元素，触发逻辑完全无效
• Bootstrap 5已移除btn-default类，且data-toggle="buttons"不再用于按钮组单选逻辑
• 未添加隐藏单选按钮的样式
• 存在拼写错误（proffessional→professional，excutive→executive）

完整实现代码 #

1. HTML结构修改 #

修正拼写，优化按钮组结构，保留单选按钮表单功能但隐藏：

<div class="btn-group" role="group" aria-label="Plan selection">
  <label class="btn plan-btn">
    <input type="radio" name="change" id="entry" value="1" autocomplete="off"> Entry
  </label>
  <label class="btn plan-btn">
    <input type="radio" name="change" id="professional" value="2" autocomplete="off"> Professional
  </label>
  <label class="btn plan-btn">
    <input type="radio" name="change" id="executive" value="3" autocomplete="off"> Executive
  </label>
</div>

2. CSS样式设置 #

隐藏单选按钮，定义默认及选中后的按钮样式：

/* 隐藏单选按钮，保留表单功能 */
.plan-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 默认按钮样式 */
.plan-btn {
  background-color: #cd6133;
  border-color: #cd6133;
  color: white;
}

/* 覆盖Bootstrap默认hover样式 */
.plan-btn:hover {
  background-color: #b8552d;
  border-color: #b8552d;
}

/* 各选项选中后的专属样式 */
.plan-btn.entry-active {
  background-color: #05c46b;
  border-color: #05c46b;
}

.plan-btn.professional-active {
  background-color: #2c2c54;
  border-color: #2c2c54;
}

.plan-btn.executive-active {
  background-color: #227093;
  border-color: #227093;
}

3. JavaScript逻辑实现 #

监听按钮点击，切换激活样式，保证单选互斥性：

$(document).ready(function() {
  $('.plan-btn').on('click', function() {
    // 移除所有按钮的激活类
    $('.plan-btn').removeClass('entry-active professional-active executive-active');
    
    // 获取当前按钮对应的单选值
    var value = $(this).find('input[name="change"]').val();
    
    // 根据值添加对应激活类
    switch(value) {
      case '1':
        $(this).addClass('entry-active');
        break;
      case '2':
        $(this).addClass('professional-active');
        break;
      case '3':
        $(this).addClass('executive-active');
        break;
    }
    
    // 手动设置单选按钮选中状态，确保表单提交能获取值
    $(this).find('input[name="change"]').prop('checked', true);
  });
});

关键说明 #

• 使用自定义状态类（如entry-active）替代颜色值作为样式标识，符合CSS规范
• 通过绝对定位+透明度隐藏单选按钮，同时保留其表单提交功能
• 覆盖Bootstrap默认按钮样式，确保自定义颜色正常显示
• 点击时先清除所有按钮的激活状态，再给当前按钮添加对应类，保证单选互斥逻辑

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