帶選項組的多選框：每組選擇一個

Question

我有一個選擇框，其中設置了multiple屬性。我還使用<optgroup>標籤來分隔我的選擇框中的類別。我正在尋找一種方法，使用javascript或jQuery，讓每個組中的各種選項以「單選按鈕邏輯」而不是「複選框邏輯」運行。例如：

<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. 用戶選擇列表item 1.1。按預期選擇item 1.1。
2. 用戶在列表中選擇item 2.1。現在選擇item 1.1和item 2.1。
3. 用戶在列表中選擇item 1.2。現在取消選擇item 1.1，同時選擇item 2.1和item 1.2。

這有道理嗎？提前致謝！

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

雖然，事實告訴，如果你想要「單選按鈕邏輯」，你可能會考慮不使用多選框。無論如何，多個選擇框的可用性是一個痛苦（人們必須按住Ctrl鍵並點擊以選擇多個選項）。考慮使用單選按鈕，或對每個組使用單選框。兩者都很難搞砸。而且他們沒有JS，這幾乎總是一個優點。