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的{{1}}值来定位它们吗？

由于

Answer 1

是的，你可以，但因为你的名字中有[和]（在jQuery选择器中有特殊含义），你必须用\\来逃避它们。（taken from API docs）;

如果你想使用任何元字符（例如！“＃$％＆amp;'（）* +，。/：;＆lt; =＆gt;？@ [] ^`{|}〜）作为名称的文字部分，您必须使用两个反斜杠转义字符：\。

$(':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

jQuery - 限制选中的复选框数量

3 个答案: