5

我正在使用这个引导开关库。

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

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

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

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

2 回答 2

12

请记住，这checked是一个布尔属性，这意味着它的存在单独决定了它是否被应用。在 HTML5 中，您可以将空属性语法用作checkedor checked=""，但我会警告不要使用checked="true"，因为它暗示checked="false"实际上会做一些事情。而checked='potato'同样有效。

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

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

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

截屏

Stack Snippets 和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>

延伸阅读

于 2014-07-02T15:19:48.413 回答
0

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

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

handleChange: function (event, state) {
      console.log(state);
      this.setState({storyStatus: state});
  },
于 2015-12-22T15:49:40.070 回答