如何從代碼更改 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'); 似乎也有效。