分組複選框，並允許在每個組中檢查最多三個

Question

我想要一個應用程序，用戶可以爲任意個人輸入數據。每個人最多可以選擇六種選擇中的三種。我想要幫助如何強制使用任何單個jQuery的最多三個選擇。

這裏是一個示例代碼

<div id="subscriber_1"> 
    <input type=checkbox name=national> 
    <input type=checkbox name=international> 
    <input type=checkbox name=business> 
    <input type=checkbox name=entertainment> 
    <input type=checkbox name=religion> 
    <input type=checkbox name=sports> 
</div> 

訂戶可高達20運行，像subscriber_1，subscriber_2，... subscriber_20。我將非常感謝您的協助。

Answer 1

你應該一類添加到您的用戶的div，使它容易將事件處理程序：

<div id="subscriber_1" class="subscriber">...</div> 
<div id="subscriber_2" class="subscriber">...</div> 

，並使用此jQuery的：

$('.subscriber :checkbox').change(function() { 
    var $cs = $(this).closest('.subscriber').find(':checkbox:checked'); 
    if ($cs.length > 3) { 
     this.checked = false; 
    } 
}); 

jsFiddle Demo

說明：在這些複選框的更改事件中，我們查找類別最近的父代.subscriber。我們得到這個div內的複選框。如果有3個以上（當前選中的一個），我們取消選中當前的一個。

---

如果你肯定不希望添加類，你可以使用它代替選擇：

$('[id^="subscriber_"] :checkbox')... 

這就是所謂的Attribute Starts With Selector。