изменение тумблера динамически с помощью 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

ОК, я нашел его. Я должен добавить/удалить класс 'off' в родительском div. Кроме того, мне нужно изменить «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

ответ

Смежные вопросы