javascript - 使用 bootstraptoggle 动态更改切换

Question

我正在使用来自那个插件的这个开关 http://www.bootstraptoggle.com/

我想使用数据库中的数据动态更改值。

这是我的开关

<input id="switchOutput2_AA" name="switchOutput2_AA" <?php echo ($output2 == 2 ? 'checked' : '')?> type="checkbox" data-toggle="toggle" data-on="<?php echo _("ON") ?>" data-off="<?php echo _("OFF")?>" data-onstyle="success" data-offstyle="danger" value="1">    

这是我的 jquery 代码我试过这个:

$( '#switchOutput2_AA' ).addClass('toggle-on');
$( '#switchOutput2_AA' ).removeClass('toggle-off');

也尝试过:

$( '#switchOutput2_AA').prop('checked', true);

有什么想法吗？谢谢。

Answer 1

我找到了答案。我们必须更改输入的父 div 上的类。这个父级是由 bootstraptoggle 插件创建的，所以你的代码中没有它......

我的代码是

<input id="switchOutput2_AA" name="switchOutput2_AA" checked type="checkbox" data-toggle="toggle" data-on="ON" data-off="OFF" data-onstyle="success" data-offstyle="danger" value="1">    

但是，在调试时，插件创建的是:

<div class="toggle btn btn-success" data-toggle="toggle" style="width: 65px; height: 34px;">
    <input id="switchOutput2_AA" checked="" type="checkbox" data-toggle="toggle" data-on="ON" data-off="OFF" data-onstyle="success" data-offstyle="danger" value="1">
    <div class="toggle-group">
        <label class="btn btn-success toggle-on">ON</label>
        <label class="btn btn-danger active toggle-off">OFF</label>
        <span class="toggle-handle btn btn-default"></span>
    </div>
 </div>

当我们想要打开开关时:

$( '#switchOutput1_AA' ).parent().removeClass('off');
$( '#switchOutput1_AA' ).parent().removeClass('btn-danger');
$( '#switchOutput1_AA').parent().addClass('btn-success');

并切换到关闭:

$( '#switchOutput1_AA' ).parent().addClass('off');
$( '#switchOutput1_AA' ).parent().removeClass('btn-success');
$( '#switchOutput1_AA' ).parent().addClass('btn-danger');