如何从代码更改 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

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

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

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

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

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

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

顺便说一句，我尝试了.flipswitch( "option", "checked", true )构造，但没有运气。

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

Answer 3

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

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

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

祝你好运 ！

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'); 似乎也有效。