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

Posted 2023-05-07

【中文标题】如何从代码中更改 jquery 移动翻转开关状态

【英文标题】：How to change the jquery mobile flip switch state from code

【发布时间】：2012-03-06 07:35:36

【问题描述】：

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

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

【参考方案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');

它将页面上显示的第二个滑块从是切换到否。

【参考方案2】：

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

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

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

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

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

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

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

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

【讨论】：

我不得不使用attr，因为由于某种原因，翻转开关进入了无限循环！ ***.com/questions/17027566/…

【参考方案3】：

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

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

确保您的 data-role 是 flip-switch 以完成这项工作。

祝你好运！

【讨论】：

data-role="flipswitch"（无连字符）

【参考方案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>

【参考方案5】：

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

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

干杯， 史蒂夫

【参考方案6】：

我无法让“flipswitch”部分工作，因此将其视为普通复选框可能对您有用（适用于 jQuery Mobile 1.4.3）：

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

【参考方案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">

【参考方案8】：

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