Casella multiselect con Optgroup: selezionare uno per gruppo

Question

Ho una selectbox con il set di attributi multiple. Sto anche usando i tag <optgroup> per separare le categorie all'interno della mia casella di selezione. Sto cercando un modo, usando javascript o jQuery, per far sì che le varie opzioni all'interno di ciascun gruppo si comportino con "logica pulsante radio" piuttosto che "logica casella di controllo". Per esempio: seleziona

<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. utente item 1.1 nella lista. item 1.1 è selezionato come previsto.
2. L'utente seleziona item 2.1 nell'elenco. Ora sono selezionati sia item 1.1 sia item 2.1.
3. L'utente seleziona item 1.2 nell'elenco. Ora item 1.1 è deselezionato, mentre sono selezionati sia item 2.1 sia item 1.2.

Ha senso? Grazie in anticipo!

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); 
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Sebbene, a dire il vero, se si desidera "logica pulsante radio", si potrebbe considerare di non utilizzare una casella di selezione multipla. L'usabilità con più caselle di selezione è comunque un dolore (le persone devono fare clic tenendo premuto il tasto Ctrl per selezionare più opzioni). Prendi in considerazione l'utilizzo di pulsanti di scelta o l'utilizzo di una casella di selezione singola per ciascun gruppo. Entrambi sono più difficili da incasinare. E lavorano senza JS, che è praticamente sempre un vantaggio.