Come modificare lo stato dell'interruttore flip mobile jquery dal codice

Question

Ho alcuni interruttori a levetta jQuery Mobile sulla mia applicazione Android/iPad, e ho bisogno di cambiare i loro stati (on/off) in modo dinamico, utilizzando JavaScript. Stavo cercando una soluzione qui, (Change value of flip toggle dynamically with jQuery Mobile) e ho provato diversi modi (.val('on'), .slider('enable') ...) ma sembra che il controllo non funzioni affatto.

Esiste una soluzione per questo problema? Come posso fare per cambiare lo stato del flip switch dal codice?

Answer 1

Ho esaminato la pagina che avete inviato e mi ha confermato che la soluzione:

$('selector').val('value').slider('refresh'); 

effettivamente funziona. Assicurati che il "selettore" faccia riferimento all'elemento selezionato e che "valore" sia un valore definito sull'elemento opzione che desideri abilitare.

mi ha confermato questa visitando http://jquerymobile.com/demos/1.0.1/docs/forms/switch/index.html, poi con la console di Firebug l'immissione della riga:

$("#flip-b").val('no').slider('refresh'); 

E 'acceso il secondo cursore visualizzato nella pagina da yes a no.

Answer 2

fa questo lavoro:

• 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 3

@ risposta di Pizano sopra lavorato per me.

Anch'io stavo avendo questo problema. Nel mio caso, mi mancava l'importantissima ".slider ('Aggiorna')"

Cheers, Steve

Answer 4

Per JQuery 1.4 o successivo, se si vuole attivare un interruttore a fogli mobili dinamicamente

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

Verificare che il proprio ruolo di dati sia flip-switch per farlo funzionare.

Buona fortuna!

Answer 5

non ho potuto ottenere la parte 'flipswitch' al lavoro, in modo da trattare come una casella di controllo normale potrebbe funzionare per voi (questo è per jQuery Mobile 1.4.3):

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

Answer 6

ci sono due tipi di flipswitch, selezionare basato e casella di controllo basato. Per impostare un selezionare il widget basato su, utilizzare.val() construct

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

dove "on" è uno dei valori di opzione nell'elemento select.

Per impostare un widget basato casella, utilizzare il .prop() costruire

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

cui vero è vero o falso. (Grazie a Jeremy Hill per il suggerimento).

BTW Ho provato il costrutto `.flipswitch (" option "," checked ", true) senza fortuna.

Nota c'è anche un cursore passare simile alla selezione basata flipswitch.

Answer 7

Esistono due modi per impostare i flipswitch (basati su checkbox e select), ma è possibile modificare lo stato solo dinamicamente con il metodo basato su select.

Jquery cambiamento di stato:

$("#mySwitch").val('no').flipswitch('refresh'); 

metodo Select-based:

<select name="mySwitch" id="mySwitch" data-role="flipswitch" > 
    <option value="no">No</option> 
    <option value="yes">Yes</option> 
</select> 

Casella di controllo a base di: (non può cambiare lo stato dinamico)

<input type="checkbox" id="mySwitch" data-role="flipswitch"> 

Answer 8

$("#mySwitch").val('no').flipswitch().flipswitch('refresh'); sembra funzionare anche.