Как изменить состояние мобильного переключателя jquery из кода

У меня есть jQuery Mobile flip toggle switch на моем приложении Android/iPad, и мне нужно изменять свои состояния (вкл/выкл) динамически, используя JavaScript. Я искал решение здесь (Изменить значение flip для динамического переключения с помощью jQuery Mobile), и я попробовал несколько способов (.val('on'), .slider('enable')...) но кажется, что управление не работает вообще.

Есть ли решение для этой проблемы? Как я могу изменить состояние флип-переключателя из кода?

Ответы

Ответ 1

Я просмотрел опубликованную вами страницу и подтвердил, что решение:

$('selector').val('value').slider('refresh');

действительно работает. Убедитесь, что "selector" ссылается на ваш элемент select, а "value" - это значение, которое вы определили в элементе опции, который вы хотите включить.

Я подтвердил это, посетив http://jquerymobile.com/demos/1.0.1/docs/forms/switch/index.html, затем с помощью консоли firebug, входящей в строку:

$("#flip-b").val('no').slider('refresh');

Он переключил второй слайдер, отображаемый на странице, от "да" до "нет".

Ответ 2

Для JQuery 1.4 или более поздней версии, если вы хотите динамически переключаться с помощью переключателя

$("#flip").val('on').flipswitch('refresh');

Убедитесь, что ваша роль данных - флип-переключатель, чтобы сделать это.

Удачи!

Ответ 3

Это работает:

http://jsfiddle.net/AYLpe/

var fts = $('#flipMe');
fts.val('on');
fts.slider('refresh');

HTML

<label for="flip-a">Select slider:</label>
<select name="slider" id="flipMe" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>

Ответ 4

Существует два типа флип-переключателя , выберите базу и установите флажок. Чтобы установить виджет, основанный на выборе, используйте конструкцию .val()

$("#myFlip").val("on").flipswitch( "refresh" ) ;

где "on" - одно из значений параметра в элементе select.

Чтобы установить виджет на основе флажка, используйте конструкцию .prop()

$("#myFlip").prop( "checked", true ).flipswitch( "refresh" ) ;

где true - true или false. (Спасибо Джереми Хилл за подсказку).

BTW Я попробовал `.flipswitch( "option", "checked", true) построить без везения.

Обратите внимание, что есть также переключатель слайдера, аналогичный флип-переключателю.

Ответ 5

@Ответ Пизано выше работал у меня.

У меня тоже была эта проблема. В моем случае мне не хватало все важные ".slider('refresh')"

Cheers, Стив

Ответ 6

Я не мог заставить часть "флипсликса" работать, поэтому для вас это может выглядеть как нормальный флажок (это для jQuery Mobile 1.4.3):

$('input[name="my-flipswitch-name"]').prop('checked', true).trigger('click').trigger('change');

Ответ 7

Существует два способа создания флип-переключателей (на основе флажка и выбора), но вы можете только динамически изменять состояние с помощью метода на основе выбора.

Jquery для изменения состояния:

$("#mySwitch").val('no').flipswitch('refresh');

Метод выбора:

<select name="mySwitch" id="mySwitch" data-role="flipswitch" >
   <option value="no">No</option>
   <option value="yes">Yes</option>
</select>

На основе флажка: (невозможно динамически изменять состояние)

<input type="checkbox" id="mySwitch" data-role="flipswitch">

Ответ 8

$("#mySwitch").val('no').flipswitch().flipswitch('refresh'); похоже, тоже работает.