Question

我的Android / iPad应用程序上有一些jQuery Mobile翻转切换开关，我需要使用JavaScript动态更改其状态（开/关）。我在这里寻找一个解决方案，（Change value of flip toggle dynamically with jQuery Mobile）我尝试了几种方式（.val('on')，.slider('enable') ...）但似乎控件根本不起作用。

这个问题有解决方案吗？如何从代码中更改翻转开关状态？

Answer 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');

它将页面上显示的第二个滑块从yes切换为no。

Answer 2

对于JQuery 1.4或更高版本，如果要动态切换翻转开关

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

确保数据角色 翻转开关以使其正常工作。

祝你好运！

Answer 3

有两种类型的 flipswitch ，选择和复选框。要设置基于 select 的窗口小部件，请使用.val（）构造

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

＆＃34; on＆＃34;是select元素中的选项值之一。

要设置基于复选框的窗口小部件，请使用.prop（）构造

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

其中true为true或false。（感谢Jeremy Hill提示）。

BTW我试过`.flipswitch（＆＃34;选项＃34;，＆＃34;检查＆＃34;，true）构造没有运气。

请注意，还有一个滑块开关类似于基于选择的 flipswitch 。

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

@ Pizano的答案对我有用。

我也遇到了这个问题。就我而言，我错过了最重要的“.slider（'refresh'）”

干杯，史蒂夫

Answer 6

我无法让'flipswitch'部分工作，因此像普通复选框一样对待它可能适合你（这适用于jQuery Mobile 1.4.3）：

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

Answer 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">

Answer 8

$("#mySwitch").val('no').flipswitch().flipswitch('refresh'); 似乎也有效。

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

8 个答案: