Bootstrap Switch - ON state

Question

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.

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-off by default, irrespective of the value of checked attribute that goes by with the checkbox field.

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

Answer 1

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

The following code should initialize bootstrap switch with checkboxes defaulted on or off:

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

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

Working Demo in 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>

---

Further Reading

• Bootstrap Switch Docs

Answer 2

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

I had to add 'event' to my handleChange function

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

Answer 3

I solved adding "state" property in JQuery:

$("#is_demo").bootstrapSwitch('state', true);