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

Question

В моем приложении Android / iPad есть несколько переключателей jQuery Mobile, и мне нужно изменять их состояния (вкл / выкл) динамически, используя JavaScript. Я искал решение здесь, ( Динамическое изменение значения флип с помощью jQuery Mobile ), и я пробовал несколько способов (.val('on'), .slider('enable') ...), но кажется, что элемент управления не работает на все.

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

Answer 1

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

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

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

Я подтвердил это, посетив http://jquerymobile.com/demos/1.0.1/docs/forms/switch/index.html,, после чего консоль firebug зашла в строку:

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

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

Answer 2

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

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

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

Удачи!

Answer 3

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

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

, где «on» - это одно из значений опции в элементе select.

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

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

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

Кстати, я попробовал конструкцию `.flipswitch (" option "," checked ", true) безуспешно.

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

Answer 4

Работает ли это:

• http://jsfiddle.net/AYLpe/

JS

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>

Answer 5

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

Answer 6

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

Запрос на изменение состояния:

$("#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">

Answer 7

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

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

Answer 8

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

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

Ура, Стив