自举开关 - 开启状态答案

【问题标题】：Bootstrap Switch - ON state自举开关 - 开启状态
【发布时间】：2014-07-02 14:18:38
【问题描述】：

我的 html 中有一个复选框。现在，它始终显示为 OFF 状态，即使在加载文档时它的 checked 属性设置为 true。

除此之外我还需要做什么？

编辑 - 我的理解是 Switch 在输入类型复选框字段周围添加一个容器，默认为 bootstrap-switch-off，无论复选框字段的选中属性值如何。

<input type="checkbox" name="my-custom" id="Switch" checked="true">

【问题讨论】：

你能发布你正在制作的 HTML 吗？
你能出示你的javascript代码吗？

标签： twitter-bootstrap bootstrap-switch

【解决方案1】：

记住checked 是boolean attribute，这意味着它的存在决定了它是否被应用。在 HTML5 中，您可以将empty attribute syntax 用作checked 或checked=""，但我会警告不要使用checked="true"，因为它暗示checked="false" 实际上会做一些事情。而checked='potato' 也同样有效。

以下代码应使用默认打开或关闭的复选框来初始化引导开关：

<input type="checkbox" class="switch" checked /> <!-- on  --&gt
<input type="checkbox" class="switch" />         <!-- off --&gt

$("input.switch").bootstrapSwitch();

堆栈片段和jsFiddle 中的工作演示

$("input.switch").bootstrapSwitch();

body { padding: 15px; }

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css">

<div >
    <label for="chk1">Default On:</label>
    <input type="checkbox" class="switch" id="chk1" checked />
</div>

<div>
    <label for="chk2">Default Off:</label>
    <input type="checkbox" class="switch" id="chk2" />
</div>

进一步阅读

Bootstrap Switch Docs

【讨论】：

【解决方案2】：

解决了这个问题，而且很简单。

我必须在我的 handleChange 函数中添加“事件”

handleChange: function (event, state) {
      console.log(state);
      this.setState({storyStatus: state});
  },

【讨论】：