bootstrap switch setState using a jquery function

Question

I'm trying to set the state of a bootstrap switch with two external buttons, this is the code:

    <div>
        <input type="checkbox" name="switch" id="switch" value="1" data-on-text="ON" data-off-text="OFF" />
    </div>

    <div>
        <a id="set_on">ON</a>
        <a id="set_off">OFF</a>
    </div>

<script src="assets/jquery.min.js" type="text/javascript"></script>
<script src="assets/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/bootstrap-switch.js"></script>
<script>
    $("#switch").bootstrapSwitch();
    $( "#set_on" ).click(function() {
        $("#switch").bootstrapSwitch('setState', true);
    });
    $( "#set_off" ).click(function() {
        $("#switch").bootstrapSwitch('setState', false);
    });
</script>

Clicking on the buttons ON or OFF the switch no not toggle its state. Looking on the console of the browser I read this error: TypeError: $(...).bootstrapSwitch is not a function

If I try to set the State of the bootstrap switch outside the function in this way:

<script>
    $("#switch").bootstrapSwitch();
    $("#switch").bootstrapSwitch('setState', false);
</script>

the switch toggle correctly to the ON state.

score 20 · Answer 1 · answered Dec 05 '15 at 07:42

20

Please replace your code with below :

    <script type="text/javascript">
    $( document ).ready(function() {
    $("#switch").bootstrapSwitch();

    $( "#set_on" ).click(function() {
        $("#switch").bootstrapSwitch('state', true);
    });
    $( "#set_off" ).click(function() {
        $("#switch").bootstrapSwitch('state', false);
    });
    });
    </script>

answered Dec 05 '15 at 07:42

Amit Chaudhari

397
1
3

Sorry, was a my mistake, I found the problem, I have other some js file inclusione at the bottom of the file. If I put the script at bottom works fine, I'm sorry I wasted your time – pablinho Dec 05 '15 at 08:12
The big takeaway for me was that the op's `"setState"` should be `"state"`. – Okomikeruko Jan 11 '20 at 15:56

Manoj Salvi · Answer 2 · 2015-12-05T07:50:30.920

4

Try wrapping your code inside $( document ).ready(function() {});so that all of your DOM elements loads before jQuery code is executed like this :

<script>
$( document ).ready(function() {
    $("#switch").bootstrapSwitch();
    $("#switch").bootstrapSwitch('setState', false);
});
</script>

try using it in your full script like this -

<script>

 $( document ).ready(function() {
    $("#switch").bootstrapSwitch();
    $( "#set_on" ).click(function() {
        $("#switch").bootstrapSwitch('setState', true);
    });
    $( "#set_off" ).click(function() {
        $("#switch").bootstrapSwitch('setState', false);
    });
});

</script>

edited Dec 05 '15 at 07:50

answered Dec 05 '15 at 07:29

Manoj Salvi

2,639
1
17
21

In this way I've the same error: TypeError: $(...).bootstrapSwitch is not a function. Anyway, I had no problem on the code you post, but on the top one ;) The one you posted works OK without $( document ).ready(function() {}); – pablinho Dec 05 '15 at 07:42
1

Sorry, was a my mistake, I found the problem, I have other some js file inclusione at the bottom of the file. If I put the script at bottom works fine, I'm sorry I wasted your time – pablinho Dec 05 '15 at 08:11
As of [Documentation](http://www.acceleraise.org/static/public/t1-r1/plugins/bootstrap-switch/#state) , method name must be `set` instead of `setState`. – Cataclysm Nov 28 '20 at 17:40

score 2 · Answer 3 · answered Sep 10 '21 at 01:40

2

Just running into this question for my problem, I found a solution that is not documented.

So just do:

 $('#switch').prop('checked', true).trigger('change');

answered Sep 10 '21 at 01:40

D4V1D

5,805
3
30
65

score 0 · Answer 4 · edited Feb 12 '21 at 12:36

0

You could try using bootstrapSwitch(), something like this

$("[name = 'status']").bootstrapSwitch();

<input name = "status" type="checkbox">

edited Feb 12 '21 at 12:36

sonali

762
10
23

answered Feb 11 '21 at 22:47

Ayoub Aarab

57
6

bootstrap switch setState using a jquery function

4 Answers4