Bootstrap 阻止 jQuery 改变复选框的状态答案

【问题标题】：Boostrap prevents jQuery from changing checkbox' stateBootstrap 阻止 jQuery 改变复选框的状态
【发布时间】：2019-01-04 19:48:00
【问题描述】：

我正在使用 bootstrap 3.3.6 使我的网络服务器（龙卷风设置）看起来更专业。但是，现在我正在尝试从 JSON 文件加载默认值，复选框被卡在它们的初始值上。更改 JSON 文件中的相应值无效。我知道问题出在 Bootstrap 上，因为注释掉“配置重新排序开关”部分的三行可以解决我的问题。我对 Java 和 Web 开发还很陌生，所以请多多包涵。

可以使用以下方法取消选中普通复选框：

$('#reorderButton').prop('checked', false);

但这不适用于 Bootstrap。在专门在线搜索引导程序/复选框不起作用之前，我在该主题上尝试了各种排列。这里不乏帖子，但在尝试通过这些帖子找到我的解决方案之后，我一定是想念所有树木的森林：

Bootstrap Checkbox not working in nav-pills

Bootstrap Checkbox is not working properly

checkbox doesn't (check/uncheck) work inside bootstrap tab-pane

Bootstrap doesn't use "checked" attribute of checkbox

Toggle checkbox on Twitter Bootstrap

我尝试压缩我的代码并将其放在小提琴上，但我没有成功，所以这里是来自不同文件的相关代码。

我的html：

  <tr>  
    <td>  
      <th>Reorder&nbsp;</th>
    </td>
    <td>
      <div class="row sidebar-row vertical-align">
        <div class="col-xs-7">
          <input type="checkbox" id='reorderButton' name="reorder_enable" data-size="small" >
        </div>
      </div>
    </td>
  </tr>

我的 .js 文件：

// Configure Reorder switch
$("[name='reorder_enable']").bootstrapSwitch();
$("[name='reorder_enable']").bootstrapSwitch('state', reorder_enable, true);
$('input[name="reorder_enable"]').on('switchChange.bootstrapSwitch', function(event,state) {
    changeReorderEnable();
});
// <SNIP>
var changeReorderEnable = function()
{
    reorder_enable = $("[name='reorder_enable']").bootstrapSwitch('state');
    $.ajax({
        type: "PUT",
        url: server_url + 'reorder',
        contentType: "application/json",
        data: JSON.stringify({"enable": reorder_enable})
    });
};
// <SNIP>
console.log("Let's try and change reorderButton..");
$('#reorderButton').prop('checked', false);

-- 编辑：CSS--

我对 CSS 所做的工作很少，我的添加对上述代码 sn-ps (AFAIK) 没有任何影响。我已经包含了这个版本的引导程序附带的样式表：

<link href="js/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/my-server.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="js/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="js/bootstrap-3.3.6-dist/css/bootstrap-switch.min.css" rel="stylesheet">
<link href="js/bootstrap-slider-10.2.1/css/bootstrap-slider.css" rel="stylesheet">
<link href="js/bootstrap-slider-10.2.1/css/bootstrap-slider.min.css" rel="stylesheet">

【问题讨论】：

我正在尝试组合一个 jsfiddle 来说明这一点，但我找不到在线加载 bootstrap-switch 和 bootstrap-slider 的适当路径。
即从在本地加载它们：<script src="js/bootstrap-3.3.6-dist/js/bootstrap-switch.min.js"></script> 转为使用 url 加载它们：<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

标签： jquery twitter-bootstrap-3

【解决方案1】：

我想通了。 jQuery 更改复选框的状态如下：

$('#id').prop('checked', value);

但 Bootstrap 显然没有触及该属性，而是（在我的情况下）要求：

$("[name='reorder_enable']").bootstrapSwitch('state', reorder_enable, true);

reorder_enable 设置复选框的状态。最后一个参数true，不会影响复选框的状态。

【讨论】：