Question

我正在尝试在项目中使用引导程序开关。 found here文档尚不清楚如何正确传递选项。我没有运气就尝试了以下方法：

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

这有效：

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

确定这不是开发人员打算使用它的方式吗？传递多个选项的正确方法是什么？

Answer 1

对我来说很好，请查看下一个工作示例。也许您以错误的顺序包含了 css 或 js ？

$(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>

引导开关不接受选项？

1 个答案: