使用 jquery 函数引导开关 setState答案

【问题标题】：bootstrap switch setState using a jquery function使用 jquery 函数引导开关 setState
【发布时间】：2015-12-05 07:18:27
【问题描述】：

我正在尝试使用两个外部按钮设置引导开关的状态，代码如下：

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

单击按钮 ON 或 OFF 开关不会切换其状态。在浏览器的控制台上，我读到了这个错误： TypeError: $(...).bootstrapSwitch 不是函数

如果我尝试以这种方式在函数外设置引导开关的状态：

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

开关正确切换到 ON 状态。

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-switch

【解决方案1】：

请用以下代码替换您的代码：

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

【讨论】：

对不起，是我的错误，我发现了问题，我在文件底部还有其他一些 js 文件包含。如果我把脚本放在底部可以正常工作，很抱歉浪费了您的时间
对我来说最大的收获是操作的"setState" 应该是"state"。

【解决方案2】：

尝试将您的代码包装在 $( document ).ready(function() {}); 中，以便在执行 jQuery 代码之前加载所有 DOM 元素：

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

尝试像这样在你的完整脚本中使用它 -

<script>

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

</script>

【讨论】：

这样我有同样的错误： TypeError: $(...).bootstrapSwitch is not a function。无论如何，我对您发布的代码没有问题，但在最上面的代码上 ;) 您发布的代码没有 $( document ).ready(function() {});
对不起，是我的错误，我发现了问题，我在文件底部还有其他一些 js 文件包含。如果我把脚本放在底部可以正常工作，对不起，我浪费了你的时间
从 Documentation 开始，方法名称必须是 set 而不是 setState。

【解决方案3】：

你可以试试bootstrapSwitch()，类似这样的

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

&lt;input name = "status" type="checkbox"&gt;

【讨论】：

【解决方案4】：

刚刚遇到这个问题，我发现了一个没有记录的解决方案。

那就这样吧：

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

【讨论】：