求助：Approve/Deny单选按钮点击后样式无法正确切换

你的代码逻辑出现了重复且冲突的样式处理，导致两个按钮的样式无法正确切换。咱们来一步步修正：

问题根源 #

在你的change事件处理函数中，你同时对Approve和Deny按钮的btn-success和btn-danger类做了无差别处理——不管当前点击的是哪个按钮，最后都会执行给当前按钮添加btn-danger的逻辑，这就直接覆盖了之前的btn-success样式，自然达不到预期的切换效果。

修正后的实现思路 #

1. 每次单选按钮切换时，先统一重置所有按钮的样式：移除btn-success和btn-danger，恢复为默认的btn-default
2. 再根据当前选中的按钮类型，给对应的父元素（label标签）添加专属样式：
   • 选中approve时，添加btn-success
   • 选中deny时，添加btn-danger

修正后的代码 #

HTML（保持原有结构即可）

<div class="btn-group-vertical" data-toggle="buttons" id="CategoryInputs">
  <label class="btn btn-default">
    <input id="approve" name="status" required="" type="radio" value="category 1" />APPROVE
  </label>
  <label class="btn btn-default">
    <input id="deny" name="status" required="" type="radio" value="category 2" />DENY
  </label>
</div>

JavaScript

$(document).ready(function() {
  // 高亮选中的状态按钮
  $("#CategoryInputs input:radio").change(function(){
    // 第一步：重置所有按钮的样式为默认状态
    $("#CategoryInputs .btn").removeClass("btn-success btn-danger").addClass("btn-default");
    
    // 第二步：根据当前选中的按钮添加对应样式
    const $selectedLabel = $(this).parent();
    if ($(this).attr("id") === "approve") {
      $selectedLabel.removeClass("btn-default").addClass("btn-success");
    } else if ($(this).attr("id") === "deny") {
      $selectedLabel.removeClass("btn-default").addClass("btn-danger");
    }
  });
});

逻辑说明 #

• 首先通过$("#CategoryInputs .btn")选中所有按钮容器，统一移除特殊样式并恢复默认，彻底避免样式残留问题
• 然后通过当前选中单选框的id判断是哪个按钮，针对性添加对应的成功/危险样式
• 这样每次切换时，只会给当前选中的按钮应用专属样式，另一个按钮自动回到默认状态

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