twitter-bootstrap 自举开关 - ON 状态

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24533554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 21:03:17  来源:igfitidea点击:

Bootstrap Switch - ON state

twitter-bootstrapbootstrap-switch

提问by user2171262

I am using this bootstrap switch library.

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

I have a checkbox in my html. Now, it is always showing in the OFF state, even though its checked property is set to true when the document is loaded.

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

What do I need to do besides that?

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

Edit- What I understand is Switch is adding a container around input type checkbox field with class bootstrap-switch-offby default, irrespective of the value of checked attribute that goes by with the checkbox field.

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

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

回答by KyleMit

Remember that checkedis a boolean attribute, meaning it's presence alone determines whether it is applied. In HTML5, you can use the empty attribute syntaxas either checkedor checked="", but I would caution against using checked="true", as it implies checked="false"would actually do something. Whereas checked='potato'is equally valid.

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

Some browsers might treat this differently so I would try using either of the two scenarios:

某些浏览器可能会对此有不同的处理方式,因此我会尝试使用以下两种情况之一:

Default On:
<input type="checkbox" class="switch" checked />

Default Off:
<input type="checkbox" class="switch" />
$("input.switch").bootstrapSwitch();

screenshot

截屏

Working demo in jsFiddle

jsFiddle 中的工作演示



Without a working demo of the issue from you, it's hard to say what else might be going on. You can take a look at some of the options offered in the documentationto help troubleshoot what's going on.

如果没有您提供的问题的工作演示,很难说还会发生什么。您可以查看文档中提供的一些选项,以帮助解决发生的问题。

You can tap into initialization by listening to the .onInitevent, then check the .stateproperty and toggle with .toggleStatemethod if necessary.

您可以通过侦听.onInit事件进入初始化,然后检查.state属性并.toggleState在必要时使用方法切换。

回答by chinds

Solved this issue, and it wa s simple one at that.

解决了这个问题,很简单。

I had to add 'event' to my handleChange function

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

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