17

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?

Community
  • 1
  • 1
Gabriel Mendez
  • 1,115
  • 1
  • 9
  • 28

8 Answers8

26

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.

Pizano
  • 418
  • 4
  • 7
8

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.

SharpC
  • 6,974
  • 4
  • 45
  • 40
dbagnara
  • 745
  • 6
  • 6
  • I had to use `attr` as for some reason the flipswitch went into an infinite loop! https://stackoverflow.com/questions/17027566/how-to-check-checkbox-dynamically-jquery-mobile/67749920#67749920 – SharpC May 29 '21 at 09:55
6

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

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

Make sure that your data-role is flip-switch to make this work.

Good Luck !

Shubhral Y Kumar
  • 61
  • 1
  • 1
3

Does this work:

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>
Phill Pafford
  • 83,471
  • 91
  • 263
  • 383
0

@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

sstringer
  • 486
  • 7
  • 12
0

I couldn't get the 'flipswitch' part to work, so treating it like a normal checkbox might work for you (this is for jQuery Mobile 1.4.3):

$('input[name="my-flipswitch-name"]').prop('checked', true).trigger('click').trigger('change');
Jeremy Hill
  • 91
  • 1
0

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">
user2755541
  • 536
  • 2
  • 10
  • 25
-1

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

TylerH
  • 20,799
  • 66
  • 75
  • 101
ali
  • 1