Bootstrap switch doesn't accept options?

Question

I'm attempting to use bootstrap switch in a project. The documentation found here isn't clear on how to properly pass options. I tried the following without any luck:

$("[name='my-checkbox']").bootstrapSwitch({
            'size': 'small',
            'onColor': 'success'
 });

This however, works:

$("[name='my-checkbox']").bootstrapSwitch('size', 'small');
$("[name='my-checkbox']").bootstrapSwitch('onColor', 'success');

surely this isn't the way the developers intended for it to get used? what's the correct way to pass multiple options?

Answer 1

It is working fine for me, check the next working example. Maybe you include the css or js in wrong order?

$(document).ready(function()
{
    $("[name='checkbox1']").bootstrapSwitch({
        "size":"small",
        "onColor":"success"
    });

    $("[name='checkbox2']").bootstrapSwitch({
        "onColor":"success",
        "offColor":"danger"
    });

    $("[name='checkbox3']").bootstrapSwitch({
        "size":"large",
        "onColor":"primary",
        "offColor":"info"
    });

    $("[name='checkbox4']").bootstrapSwitch({
        "size": "mini",
        "onColor":"primary",
        "offColor":"warning",
        "animate": false,
        "state": false
    });
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Bootstrap-switch CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css">

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Bootstrap-switch JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>

<input type="checkbox" name="checkbox1" checked>
<br><br>
<input type="checkbox" name="checkbox2" checked>
<br><br>
<input type="checkbox" name="checkbox3" checked>
<br><br>
<input type="checkbox" name="checkbox4" checked>