Question

我正在使用引导程序3.3.6使我的Web服务器（龙卷风设置）看起来更专业。但是，既然我正在尝试从JSON文件加载默认值，则复选框将保留其初始值。更改JSON文件中的相应值无效。我知道问题出在Bootstrap上，因为注释掉“ Configure Reorder switch”部分的三行内容可以解决我的问题。我对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所做的工作很少，我的添加都不会影响上述代码段（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">

Answer 1

我知道了。 jQuery如下更改复选框的状态：

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

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

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

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

Boostrap可防止jQuery更改复选框的状态

1 个答案: