I pulsanti di opzione 'Block Style' funzionano su tutto MA iPad

Question

Ho un gruppo di pulsanti di opzione e li ho abbinati in modo che vengano visualizzati: blocchi in modo che appaiano come pulsanti (hanno anche nascosto il pulsante di opzione stesso). Funziona perfettamente su Chrome e Firefox su desktop e su tablet Android ... ma non funziona su un iPad.

vederlo qui: http://jsfiddle.net/WhNRK/

Per qualsiasi motivo l'elemento di blocco non è 'attivo' su un iPad e non imposta il pulsante di opzione. Se si "mostra" il pulsante di opzione è possibile vedere che non viene selezionato quando si fa clic sul blocco. Tuttavia, se faccio clic sul pulsante di opzione vero e proprio, seleziona correttamente e cambia anche il colore di sfondo dell'elemento di blocco come dovrebbe! http://jsfiddle.net/WhNRK/1/

Qualche idea su cosa sto facendo male che sta causando questo accada? Sembra che dovrebbe essere piuttosto semplice funzionalità, quindi spero che sia solo qualcosa di semplice sto trascurando ...

L'uso principale del sito che questo è incorporato all'interno è pensato per dispositivi mobili, quindi sicuramente bisogno lavorando su qualsiasi dispositivo iOS (supponendo che possa accadere anche su un iPhone, solo che non ne ho uno qui da testare subito).

Grazie per tutti i suggerimenti che potreste avere!

Answer 1

Fisicamente, il tuo violino non funziona nemmeno su iPhone, sia in safari che in cromo.

Curioso come sono, ho provato a trovare la soluzione giocando un po 'con il tuo codice. Ho cambiato un po 'l'html per rendere l'etichetta un fratello dell'input, piuttosto che un genitore. Ancora senza alcun effetto sul mio iphone.

Dopo aver cercato su Google ho trovato questo: http://forums.macrumors.com/showthread.php?t=785632 Ho provato la soluzione e sembra funzionare, anche se non ho idea del perché. Immagino sia una specie di bug ...

Devi aggiungere onclick="" alle tue etichette.

Non l'ho provato su un iPad, ma siccome è solo un grande iPhone dovrebbe funzionare allo stesso modo. Un esempio di lavoro può essere trovato qui: http://jsfiddle.net/WhNRK/15/