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>

Моя основная проблема заключается в нацеливании флажков.

Можно ли настроить таргетинг на них, используя name значение bundle_option[9][]?

Спасибо

Answer 1

Да, вы можете, но поскольку в названии есть [ и ] (которые имеют особое значение в селекторах jQuery), вы должны экранировать их с помощью \\; ( взято из API документов );

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

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

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

Answer 2

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

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

Пример скрипки

Answer 3

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

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