jQuery - ограничить количество отмеченных флажков

Question

У меня есть набор флажков, которые я бы очень хотел сделать, чтобы пользователь мог выбрать только до 5. После выбора 5, затем остальные отключены.

HTML-разметка:

<ul class="options-list"> 
<li> 
    <input type="checkbox" value="259" name="bundle_option[9][]" id="bundle-option-9-259" class="change-container-classname checkbox bundle-option-9"> 
    <span class="label"><label for="bundle-option-9-259">1 x Test 1</label></span> 
</li> 
<li> 
    <input type="checkbox" value="260" name="bundle_option[9][]" id="bundle-option-9-260" class="change-container-classname checkbox bundle-option-9"> 
    <span class="label"><label for="bundle-option-9-260">1 x Test 1</label></span> 
</li> 
<li> 
    <input type="checkbox" value="261" name="bundle_option[9][]" id="bundle-option-9-261" class="change-container-classname checkbox bundle-option-9"> 
    <span class="label"><label for="bundle-option-9-261">1 x Test 1</label></span> 
</li> 
<li> 
    <input type="checkbox" value="262" name="bundle_option[9][]" id="bundle-option-9-262" class="change-container-classname checkbox bundle-option-9"> 
    <span class="label"><label for="bundle-option-9-262">1 x Test 1</label></span> 
</li> 
<li> 
    <input type="checkbox" value="263" name="bundle_option[9][]" id="bundle-option-9-263" class="change-container-classname checkbox bundle-option-9"> 
    <span class="label"><label for="bundle-option-9-263">1 x Test 1</label></span> 
</li> 
<li> 
    <input type="checkbox" value="264" name="bundle_option[9][]" id="bundle-option-9-264" class="change-container-classname checkbox bundle-option-9"> 
    <span class="label"><label for="bundle-option-9-264">1 x Test 1</label></span> 
</li> 
</ul> 

Моя главная проблема ориентации флажков.

Могу ли я настроить таргетинг с использованием значения namebundle_option[9][]?

Благодаря

Answer 1

Да, вы можете, а потому, что у вас есть [ и ] «S в названии (которые имеют особое значение в JQuery селекторы), вы должны избавиться от них с \\; (taken from API docs);

Если вы хотите использовать какой-либо из мета-символов (например, "#% & $«() * +,/:; < => @ []^'!.? {|} ~) как буквальная часть имени, вы должны экранировать символ с двойной косой чертой:. \

$(':checkbox[name="bundle_option\\[9\\]\\[\\]"]'); 

См http://jsfiddle.net/G9JCw/

Answer 2

вы можете использовать проверенный селектор, чтобы захватить выбранные флажки, как,

$("input[name='bundle_option[9][]']:checked") 

Answer 3

Попробуйте это:

$(".checkbox").change(function() { 
    var count = $(".checkbox:checked").length; 
    if (count >= 5) { 
     $(".checkbox").not(":checked").prop("disabled", "disabled"); 
    } 
    else{ 
     $(".checkbox").removeProp("disabled"); 
    } 
}); 

Example fiddle