jQuery函数是否有任何替代方法可以限制复选框类型选择？

Question

我编写了一个jQuery函数，将复选框选择限制为4个项目，问题是：它仅适用于标签输入本身！ 但是当我把这个标签放在 for 表中或 for 表中时，它不起作用！

我已经尝试删除标签，使 jQuery 方法正常工作，但在实现中我需要这个标签在表中显示我的项目。

这是我的 html 代码：

<c:forEach var="tempVehicles" items="${vehicleList}">
<tr>
<c:choose>
<c:when test="${tempVehicles.vehicleType eq vehicleType}">
<td>${tempVehicles.registration}  </td>
<td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}"/></td>
</c:when>
</c:choose>
</tr>
</c:forEach>

和我的jQuery代码：

$('input[type=checkbox]').on('change', function() {
var limit = 4;
if($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});

使用此代码，我可以选择 4 个以上的元素"jQuery 方法不起作用"，但是当我从输入中删除<td>标签时，该方法实际上有效。

Answer 1

由于您的输入不是同级，因此更改选择器以检查选择了多少个，如以下代码所示

$('input[type=checkbox]').on('change', function() {
var limit = 4;
if($('.single-checkbox:checked').length >= limit) {
this.checked = false;
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table><tr>
<td><input class="single-checkbox" type="checkbox" value="1"/></td>
<td><input class="single-checkbox" type="checkbox" value="2"/></td>
<td><input class="single-checkbox" type="checkbox" value="3"/></td>
<td><input class="single-checkbox" type="checkbox" value="4"/></td>
<td><input class="single-checkbox" type="checkbox" value="5"/></td>
<td><input class="single-checkbox" type="checkbox" value="6"/></td>
<td><input class="single-checkbox" type="checkbox" value="7"/></td>

Answer 2

看起来输入是tds的孩子 - 他们不是兄弟姐妹，所以.siblings不会选择正确的元素。

如果它们都有相同的single-checkbox类，则将.single-checkboxes 放入 jQuery 集合中，并在回调中检查该集合的长度(按:checked过滤(是否大于limit：

const $singleCheckbox = $('input.single-checkbox');
$singleCheckbox.on('change', function(e) {
var limit = 4;
if ($singleCheckbox.filter(':checked').length > limit) {
this.checked = false;
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
<td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
<td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
<td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
<td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
<td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
</tr>
</table>

Answer 3

您可以通过向上查询父级然后向下查询到其子级来施加检查限制。

(($) => {
$.fn.checkLimit = function(limit) {
this.on('change', function(e) {
let $parent = $(this).parent();
let $target = $parent.prop('tagName') === 'LABEL' ? $parent.parent() : $parent;
if ($target.find(':checked').length > limit) {
this.checked = false;
}
});
}
})(jQuery);
$('input[name="vIds[]"]').checkLimit(4);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Mark-up via: https://www.dyn-web.com/tutorials/forms/checkbox/same-name-group.php -->
<form action="#" method="post" class="demoForm" id="demoForm">
<fieldset>
<legend>Demo: Checkboxes Sharing Same Name</legend>
<p>Check the types of sports or fitness activities you engage in on a regular basis.</p>
<p>
<label><input type="checkbox" name="vIds[]" value="cycling" /> cycling</label>
<label><input type="checkbox" name="vIds[]" value="running" /> running</label>
<label><input type="checkbox" name="vIds[]" value="visit gym" /> visit gym</label>
<label><input type="checkbox" name="vIds[]" value="swimming" /> swimming</label>
<label><input type="checkbox" name="vIds[]" value="team sports" /> team sport(s)</label>
<label><input type="checkbox" name="vIds[]" value="other" /> other</label>
</p>
</fieldset>
</form>