Hộp chọn nhiều với nhóm chọn: Chọn một nhóm cho mỗi nhóm

Question

Tôi có hộp chọn với tập hợp thuộc tính multiple. Tôi cũng đang sử dụng các thẻ <optgroup> để phân tách các danh mục trong hộp chọn của tôi. Tôi đang tìm một cách, bằng cách sử dụng javascript hoặc jQuery, để có các tùy chọn khác nhau trong mỗi nhóm để hành xử với 'nút radio logic' thay vì 'kiểm tra hộp logic'. Ví dụ:

<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. tài chọn item 1.1 trong danh sách. item 1.1 được chọn như mong đợi.
2. Người dùng chọn item 2.1 trong danh sách. Bây giờ cả hai item 1.1 và item 2.1 đều được chọn.
3. Người dùng chọn item 1.2 trong danh sách. Bây giờ, item 1.1 được bỏ chọn, trong khi item 2.1 và item 1.2 đều được chọn.

Điều đó có hợp lý không? Cảm ơn trước!

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

Mặc dù, nếu bạn muốn "logic nút radio", bạn có thể cân nhắc không sử dụng hộp chọn nhiều. Khả năng sử dụng với nhiều hộp chọn là một nỗi đau anyway (mọi người phải bấm ctrl để chọn nhiều hơn một tùy chọn). Cân nhắc sử dụng nút radio hoặc sử dụng hộp chọn một lần cho mỗi nhóm. Cả hai đều khó khăn hơn để gây rối. Và họ làm việc mà không có JS, đó là khá nhiều luôn luôn là một cộng.