Question

我有2个单选按钮的表单：批准和拒绝。任务是：如果＆＃39;批准＆＃39;点击按钮＆＃39;拒绝＆＃39;按钮需要具有默认样式和＆＃39;批准＆＃39;按钮需要变为绿色（.btn-success）。如果＆＃39;拒绝＆＃39;点击按钮，＆＃39;批准＆＃39;按钮需要具有默认样式和“拒绝”＃39;按钮需要变红（.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() {
  // highlight selected category
  $("#CategoryInputs input:radio").change(function(){
    $("#approve").parent().removeClass("btn-success");
    $("#approve").parent().addClass("btn-default");
    if($(this).is(":checked")){
      $(this).parent().removeClass("btn-default");
      $(this).parent().addClass("btn-success");
    }else{
      $(this).parent().removeClass("btn-success");
      $(this).parent().addClass("btn-default");
    }

    $("#deny").parent().removeClass("btn-danger");
    $("#deny").parent().addClass("btn-default");
    if($(this).is(":checked")){
      $(this).parent().removeClass("btn-default");
      $(this).parent().addClass("btn-danger");
    }else{
      $(this).parent().removeClass("btn-danger");
      $(this).parent().addClass("btn-default");
    }
  });
  // end highlight
});

我显然做错了什么。因为两个按钮都变红了：（

Answer 1

您正在同时申请和删除课程。看一下这个例子。

$(document).ready(function() {
  // highlight selected category
  $("#CategoryInputs input:radio").change(function(){
    $("#approve, #deny").parent().removeClass("btn-success btn-danger").addClass("btn-default");    
    
    if($(this).is(":checked") && this.id == "approve"){
      $(this).parent().removeClass("btn-default").addClass("btn-success");
    }else{
      $(this).parent().removeClass("btn-default").addClass("btn-danger");
    }    
    
  });
  // end highlight
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<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>

Answer 2

当我尝试切换课程时，我遇到了类似的问题。现在我正在使用Bootstrap Toggle

看起来你正在使用Bootstrap。我建议你使用这个插件。它让生活更轻松。

Answer 3

我刚刚修改了你的代码，在你的例子中，你同时应用了这些类。

$("#CategoryInputs input:radio").change(function(){
    $("#approve").parent().removeClass("btn-success").parent().addClass("btn-default");
    $("#deny").parent().removeClass("btn-danger").addClass("btn-default");

    if($('#approve').is(":checked")){
        $(this).parent().removeClass("btn-default").addClass("btn-success");
    }else {
        $("#deny").parent().removeClass("btn-default").addClass("btn-danger");
    }
});

Javascript按钮颜色变化

3 个答案: