如何使用jquery更改类名答案

【问题标题】：How to change the class name using jquery如何使用jquery更改类名
【发布时间】：2016-02-16 19:04:57
【问题描述】：

我有一个复选框，我想根据一个变量来选中和取消选中。波纹管是复选框的代码。我正在使用Bootstrap 复选框。

<div class="row">
  <div class="col-sm-2">
    <label class="control-label" for="pwd">My Check-Box:</label>
  </div>
  <div class="col-sm-1">
    <span class="button-checkbox">
        <input type="checkbox" class="hidden"  id="myCheckBox"/>
        <button id="myCheckBoxButton" type="button" class="btn-chk" data-color="success" ></button>
    </span>
  </div>
</div>

当复选框被选中和未选中时，它看起来像波纹管

已检查

未选中

我尝试了多种方法来选中和取消选中该复选框。这是什么，我试过了

 $('#myCheckBox').prop('checked',true);
$('#myCheckBox').attr("disabled", false);
$('#myCheckBox').attr("disabled", "true");


$('#myCheckBoxButton').prop('checked',true);
$('#myCheckBoxButton').attr("disabled", false);
$('#myCheckBoxButton').attr("disabled", "true");

没有什么对我有用。如果我使用普通复选框，它就可以工作。

之后，我使用 firebug 调试代码。 这里我看到了选中复选框时的代码。

<input id="myCheckBox" class="hidden" type="checkbox" checked="checked">
<button id="myCheckBoxButton" class="btn-chk btn-success active" data-color="success" type="button">
<i class="state-icon glyphicon glyphicon-check"></i>
</button>

现在我尝试了这个。因为复选框是一个按钮，所以我想让我们更改类。

假设 flag 是一个变量，其中复选框的选中和取消选中取决于。

if (flag == '0') {
  $('#myCheckBox').attr('checked', false);
  $("#myCheckBoxButton").addClass("btn-chk btn-default-chk");
} else {
  $("#myCheckBoxButton").removeClass("btn-chk btn-default-chk");
  $("#myCheckBoxButton").removeClass("state-icon glyphicon glyphicon-unchecked");
  $("#myCheckBoxButton").addClass(" glyphicon glyphicon-check");
  $("#myCheckBoxButton").addClass("btn-chk btn-success active");
}

现在我可以检查了，但看起来很奇怪。

当我使用 fire bug 进行调试时，我发现代码发生了变化。

<input id="myCheckBox" class="hidden" type="checkbox">
<button id="myCheckBoxButton" class="glyphicon glyphicon-check btn-chk btn-success active" data-color="success" type="button">
<i class="state-icon glyphicon glyphicon-unchecked"></i>
</button>

我可以清楚地看到按钮中添加了一个额外的类

<button id="myCheckBoxButton" class="glyphicon glyphicon-check btn-chk btn-success active" data-color="success" type="button">

我该如何解决这个问题。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap checkbox

【解决方案1】：

看这里。它工作正常。或者你在尝试别的东西？

var flag = 0;
    if (flag == '0') {
    $('#myCheckBox').prop('checked', true);
  $("#myCheckBoxButton").addClass("btn-chk btn-default-chk");
} else {
  $("#myCheckBoxButton").removeClass("btn-chk btn-default-chk");
  $("#myCheckBoxButton").removeClass("state-icon glyphicon glyphicon-unchecked");
  $("#myCheckBoxButton").addClass(" glyphicon glyphicon-check");
  $("#myCheckBoxButton").addClass("btn-chk btn-success active");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-2">
    <label class="control-label" for="pwd">My Check-Box:</label>
  </div>
  <div class="col-sm-1">
    <span class="button-checkbox">
        <input type="checkbox" class="hidden"  id="myCheckBox" />
        <button id="myCheckBoxButton" type="button" class="btn-chk" data-color="success" ></button>
    </span>
  </div>
</div>

正如您在此处看到的，它基于标志变量工作正常，它正在取消选中和检查。

【讨论】：

【解决方案2】：

可以更改类名。访问此链接

http://api.jqueryui.com/switchclass/

【讨论】：