變化動態切換使用bootstraptoggle

我使用這個切換從該插件http://www.bootstraptoggle.com/變化動態切換使用bootstraptoggle

我想從數據庫中的數據動態改變的值。

這裏是我的肘

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

任何想法？謝謝。

來源

2016-04-29 sincos

我找到了答案。我們必須改變輸入的父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>

當我們想要的開關切換ON：

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

並切換到OFF切換：

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

來源

2016-05-01 17:20:41 sincos

要開啓

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

關閉同時

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

來源

2016-04-29 16:16:00

thx爲您的答案，但我不工作... – sincos

好的，我發現它。我必須在父div上添加/刪除類'off'。另外，我需要更改父級的'btn-success'或'btn-danger'。 – sincos

change（）在你的事件調用結束時，就像我一樣。

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

還是要使它更容易undersand

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

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

來源

2016-11-18 21:32:58 andrepaulo

只需添加這一條線上對撥動開關

$ bootstrapToggle（ '上 '）（' your_class_name。'）。

來源

2018-02-21 14:11:59 Rams

變化動態切換使用bootstraptoggle

回答

相關問題