Question

我有一个复选框，我想根据变量检查和取消选中。 Bellow是复选框的代码。我正在使用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调试代码。 在这里，我看到了检查checkBox时的代码。

<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">

如何解决这个问题可以帮助解决这个问题。

Answer 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>

正如你在那里看到的，它基于flag变量工作正常，它是取消选中和检查。

Answer 2

更改班级名称是可行的。访问此链接

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

如何使用jquery

2 个答案: