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>

我的主要问题是针对复选框。

我可以使用 bundle_option[9][] 的 name 值来定位它们吗？

谢谢

Answer 1

是的，你可以，但是因为名称中有 [ 和 ](它们在 jQuery 选择器中具有特殊含义)，所以你必须使用\\； ( taken from API docs );

If you wish to use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, you must escape the character with two backslashes: \.

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

参见http://jsfiddle.net/G9JCw/