2012-08-28 12 views
7

Tengo un grupo de botones de opción y los he diseñado para que se muestren de forma que aparezcan como botones (también han ocultado el botón de opción). Esto funciona muy bien en Chrome y Firefox en computadoras de escritorio y en tabletas Android ... pero no funcionará en un iPad.Botones de radio de 'Estilo de bloque' que funcionan en todo PERO iPad

lo ve aquí: http://jsfiddle.net/WhNRK/

Por alguna razón el elemento de bloque no es 'activa' en un iPad y no establece el botón de radio. Si 'destapo' el botón de radio, puede ver que no se selecciona al hacer clic en el bloque. Sin embargo, si hago clic en el botón de opción actual, se selecciona correctamente e incluso cambia el color de fondo del elemento de bloque como debería. http://jsfiddle.net/WhNRK/1/

¿Alguna idea de lo que estoy haciendo mal que está causando que esto suceda? Parece que debería ser una funcionalidad bastante sencilla, así que espero que sea algo simple que estoy pasando por alto ...

El uso principal del sitio en el que está incorporado está destinado a dispositivos móviles, así que definitivamente lo necesito trabajando en cualquier dispositivo iOS (suponiendo que también ocurra en un iPhone, simplemente no tengo uno aquí para probarlo en este momento).

¡Gracias por cualquier sugerencia que usted pueda tener!

Respuesta

6

Fisrt de todo, tu violín tampoco funciona en el iPhone, tanto en safari como en cromo.

Curioso como soy, intenté encontrar la solución jugando un poco con tu código. Cambió un poco el html para hacer que la etiqueta sea un hermano de la entrada, en lugar de un padre. Todavía sin ningún efecto en mi iphone.

Después de buscar en Google encontré esto: http://forums.macrumors.com/showthread.php?t=785632 Probé la solución y parece funcionar, aunque no tengo ni idea de por qué. Supongo que es algún tipo de error ...

Tienes que agregar onclick="" a tus etiquetas.

No lo probé en un iPad, pero como es solo un gran iPhone debería funcionar igual. Un ejemplo de trabajo se puede encontrar aquí: http://jsfiddle.net/WhNRK/15/

+0

@ PeterVR - Muchas gracias por esto ... simplemente lo implementé en mi código y funciona perfectamente. De hecho, me encontré con la sugerencia de 'clickear' falso en otro foro y lo intenté sin suerte ... pero lo puse en la etiqueta de entrada en lugar de en la etiqueta, así que esa fue obviamente la diferencia (más la forma en que pones la etiqueta tiene más sentido también). ¡Qué rareza! Agradezco enormemente el tiempo que tomó para resolver esto, que me ha resultado increíblemente útil y espero que sea valioso para otros en el futuro también. ¡¡¡Gracias de nuevo!!! – Mark

+0

error extraño pero su solución lo hizo! NO es necesario para iOS 6, pero solo los dispositivos más antiguos con iOS 5 (y posiblemente versiones anteriores) lo necesitan. Probado en iPad 1 y 3 –