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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何从代码中更改jquery移动翻转开关状态相关的知识,希望对你有一定的参考价值。

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

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

答案

我检查了你发布的页面,我确认了解决方案:

$('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。

另一答案

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

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

确保您的数据角色是翻转切换以使其工作。

祝好运 !

另一答案

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

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

其中“on”是select元素中的选项值之一。

要设置基于复选框的窗口小部件,请使用.prop()构造

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

其中true为true或false。 (感谢Jeremy Hill的提示)。

顺便说一句,我试过`.flipswitch(“选项”,“检查”,真实)构造没有运气。

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

另一答案

这有用吗:

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>
另一答案

@ Pizano上面的回答对我有用。

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

干杯,史蒂夫

另一答案

我无法让'flipswitch'部分工作,所以像普通的复选框那样对待它可能适合你(这适用于jQuery Mobile 1.4.3):

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

有两种方法可以制作翻转开关(基于复选框和基于选择),但是您只能使用基于选择的方法动态更改状态。

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">
另一答案

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

以上是关于如何从代码中更改jquery移动翻转开关状态的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Mobile - 单击时更改翻转开关

更改flipswitch jquery mobile的活动状态

使用带有 angularjs 和 jquery mobile 的翻转切换开关

如何从 jQuery.ajax 获取响应状态码?

什么是 jQuery,我可以在弹出窗口中显示选定复选框、下拉列表和翻转开关的文本值

如何使用 CSS(jQuery SVG 图像替换)更改 SVG 图像的颜色?