点击更改自举无线电

Question

我确定我要做的很简单但是我需要一些帮助.

我有三个单选按钮;

• 活性
• 待用
• 未找到

我想在单击按钮时更改按钮的(Bootstrap v3)类.它们都有一个默认类btn-default.但是当点击时我想拥有以下课程;

• 活跃的(btn-success)
• 不活动的(btn-warning)
• 找不到(btn-danger)

任何时候都只能选择一个,任何时候只应有一个颜色.

到目前为止我的代码在下面,我想我差不多了.如果有人可以提供一些很棒的建议.

这是我的jsfiddle的链接.

$(document).ready(function() {

  $('#option1').change(function() {
    $(this).removeClass("btn-default").addClass("btn-success");
  });
  $('#option2').change(function() {
    $(this).removeClass("btn-default").addClass("btn-warning");
  });
  $('#option3').change(function() {
    $(this).removeClass("btn-default").addClass("btn-danger");
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <input type="radio" name="options" id="option1" value="1" autocomplete="off">Active
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found
  </label>
</div>

Answer 1

您可以btn-default改为使用click事件并且只有一个处理程序:

的jsfiddle

$(".btn-default").on("click", function() {
  var classArr = ["btn-success", "btn-warning", "btn-danger"];
  $(".btn-default").removeClass(classArr.toString().replace(/,/g," "));
  var value = $(this).find("input[name='options']").val();
  $(this).addClass(classArr[value - 1]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />


<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <input type="radio" name="options" id="option1" value="1" autocomplete="off">Active
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found
  </label>
</div>