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

有什么想法吗？ THX。

Answer 1

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

我的代码是

-layout

但是，在调试时，插件创建了什么，它是：

<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');

Answer 2

只需添加此单行即可开启切换

$（ 'your_class_name。 '）bootstrapToggle（' ON'）;

Answer 3

要切换

$('#switchOutput2_AA').removeClass('off')

要关闭

$('#switchOutput2_AA').addClass('off')

Answer 4

事件调用结束时

更改（），就像我一样。

$('#switchOutput2_AA').prop('checked', !$('#switchOutput2_AA').prop('checked')).change();

或者更容易隐藏

var currentValue = $('#switchOutput2_AA').prop('checked');

$('#switchOutput2_AA').prop('checked', !currentValue).change();

使用bootstraptoggle动态更改切换

4 个答案: