jQuery casillas de verificación móviles agrupadas en 2 columnas verticales?

Question

Necesito agrupar casillas de verificación juntas pero en 2 columnas. En la imagen de abajo he creado 2 conjuntos de campo diferentes. Sé que esto no es muy semántico, pero muestra el diseño que quiero lograr.

¿Hay una manera estándar de jQuery Mobile para hacer esto?

Quiero que las casillas de verificación parezcan pertenecer a una sección. Podría quitar el corder redondeado de arriba a la izquierda verde, abajo a la izquierda rosa y abajo a la derecha azul. ¿Necesito usar anulaciones de CSS estándar para esto o hay una manera más elegante? Gracias

Answer 1

Creo que quiere mirar Layout Grids: http://jquerymobile.com/test/docs/content/content-grids.html

<div class="ui-grid-a"> 
    <div class="ui-block-a"> 
      <label><input type="checkbox" name="checkbox-1" /> Any</label> 
      <label><input type="checkbox" name="checkbox-1" /> Red </label> 
     </div> 
    <div class="ui-block-b"> 
      <label><input type="checkbox" name="checkbox-1" /> Green </label> 
      <label><input type="checkbox" name="checkbox-1" /> Black </label> 
     </div> 
</div><!-- /grid-a --> 

ACTUALIZACIÓN

Basado en su comentario, no, no puede haber dos columnas separadas agrupadas en uno fieldset.

El data-role="controlgroup" en un conjunto de campos elimina los márgenes y el relleno para dar el efecto agrupado, pero lo que usted termina con es algo como esto: http://jsfiddle.net/shanabus/qNYPh/1/

Sin embargo, si estás bien con uno de los padres fieldset y dos anidada, agrupados, fieldsets ... entonces usted puede terminar con una solución como esta: http://jsfiddle.net/shanabus/hcyfK/1/

Answer 2

shanabus dio una buena respuesta con su solución agrupados anidado: http://jsfiddle.net/shanabus/hcyfK/1/

que puede tomar que un paso fu Además, establezca/sobreescriba los valores de 'radio de borde' css apropiados a cero para cualquier esquina que necesite para deshacerse de las esquinas redondeadas y lograr una apariencia más uniforme.

De acuerdo con el ejemplo:

<label for="radio-choice-1" style="border-top-right-radius: 0">Cat</label> 
<label for="radio-choice-2" style="border-bottom-right-radius: 0">Dog</label> 
<label for="radio-choice-3" style="border-top-left-radius: 0">Hamster</label> 
<label for="radio-choice-4" style="border-bottom-left-radius: 0">Lizard</label> 

sí, soy una mala persona, porque no lo hice html css separada & pero es un ejemplo. :-)