如何从代码更改 jquery 移动翻转开关状态

Question

I have some jQuery Mobile flip toggle switches on my Android/iPad application, and I need to change their states (on/off) dynamically, using JavaScript. I was looking for a solution here, ( Change value of flip toggle dynamically with jQuery Mobile ) and I tried several ways ( .val('on') , .slider('enable') ...) but it seems the control is not working at all.

Is there a solution for this issue? How can I do to change the flip switch state from code?

Answer 1

I've examined the page you posted and I confirmed that the solution:

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

does indeed work. Make sure that 'selector' is referencing your select element, and that 'value' is a value you defined on the option element you wish to enable.

I confirmed this by visiting http://jquerymobile.com/demos/1.0.1/docs/forms/switch/index.html , then with firebug's console entering the line:

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

It switched the second slider displayed on the page from yes to no.

Answer 2

There are two types of flipswitch , select based and checkbox based. To set a select based widget, use the .val() construct

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

where "on" is one of the option values in the select element.

To set a checkbox based widget, use the .prop() construct:

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

where true is either true or false . (Thanks to Jeremy Hill for the hint).

BTW I tried the .flipswitch( "option", "checked", true ) construct with no luck.

Note there is also a slider switch similar to the select based flipswitch .

Answer 3

For JQuery 1.4 or later, if you want to toggle a flip switch dynamically

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

Make sure that your is to make this work.

Good Luck !

Answer 4

Does this work:

• 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

@Pizano's answer above worked for me.

I, too, was having this problem. In my case, I was missing the all-important ".slider('refresh')"

Cheers, Steve

Answer 6

我无法让 'flipswitch' 部分工作，所以把它当作一个普通的复选框来处理可能对你有用（这适用于 jQuery Mobile 1.4.3）：

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

Answer 7

There are two ways to make flipswitches (checkbox-based and select-based), but you can can only dynamically change the state with the select-based method.

Jquery to change state:

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

Select-based method:

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

Checkbox-based: (can't change state dynamically)

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

Answer 8

$("#mySwitch").val('no').flipswitch().flipswitch('refresh'); seems to work, too.