Cuadro multiselect con Optgroups: seleccione uno por grupo

Question

Tengo un cuadro de selección con el conjunto de atributos multiple. También estoy usando las etiquetas <optgroup> para separar categorías dentro de mi cuadro de selección. Estoy buscando una forma, usando javascript o jQuery, para tener las diferentes opciones dentro de cada grupo para que se comporten con 'lógica de botón de radio' en lugar de 'lógica de casilla de verificación'. Por ejemplo: selecciona

<optgroup label="cat1"> 
    <option>item 1.1</option> 
    <option>item 1.2</option> 
</optgroup> 
<optgroup label="cat2"> 
    <option>item 2.1</option> 
    <option>item 2.2</option> 
</optgroup> 

1. usuario item 1.1 en la lista. item 1.1 se selecciona según lo esperado.
2. El usuario selecciona item 2.1 en la lista. Ahora se seleccionan tanto item 1.1 como item 2.1.
3. El usuario selecciona item 1.2 en la lista. Ahora item 1.1 está deseleccionado, mientras que item 2.1 y item 1.2 se han seleccionado.

¿Tiene sentido? ¡Gracias por adelantado!

Answer 1

$('#select-box-id optgroup option').click(function() { 
    // only affects options contained within the same optgroup 
    // and doesn't include this 
    $(this).siblings().prop('selected', false); 
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Aunque, a decir verdad, si quiere "lógica del botón de radio", puede considerar no usar un cuadro de selección múltiple. La usabilidad con varios cuadros de selección es un dolor de todos modos (las personas tienen que presionar Ctrl + para seleccionar más de una opción). Considere usar botones de opción o usar un cuadro de selección única para cada grupo. Ambos son más difíciles de estropear. Y funcionan sin JS, lo cual es casi siempre una ventaja.