我有一系列5个复选框，连续显示。然后，在第二行，我有相同数量的5个复选框。然后在第三行，我有相同数量的5个复选框。
我想要实现的是，如果我检查了第一行中的前三个复选框，那么我就不能检查第二行中的前三个复选框。我应该只能检查第二行中的最后两个复选框。如何基于jquery中的后续复选框行来实现此验证？
五个复选框的第一行如下：
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-3" disabled>
<label for="car-1-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-3">
<label for="car-2-3"><i class="icon-tick" disabled></i></label>
</li>
<li>
<input type="checkbox" id="car-3-3">
<label for="car-3-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-3">
<label for="car-4-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-3">
<label for="car-5-3"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
五个复选框的第二行：
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-4" disabled>
<label for="car-1-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-4">
<label for="car-2-4"><i class="icon-tick" disabled></i></label>
</li>
<li>
<input type="checkbox" id="car-3-4">
<label for="car-3-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-4">
<label for="car-4-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-4">
<label for="car-5-4"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
五个复选框中的第三行：
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-5" disabled>
<label for="car-1-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-5">
<label for="car-2-5"><i class="icon-tick" disabled></i></label>
</li>
<li>
<input type="checkbox" id="car-3-5">
<label for="car-3-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-5">
<label for="car-4-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-5">
<label for="car-5-5"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
答案 0 :(得分：2)
您可以执行以下操作：
//Add event listener on checkbox inside js-cars-item
$('.js-cars-item [type="checkbox"]').change(function() {
var idx = $(this).closest('li').index(); //Get the index - Number in order
var chk = $(this).is(":checked"); //Get if checked or not
var obj = this; //Checkbox object
$('.js-cars-item').each(function() { //Loop every js-cars-item
//Find the checkbox with the same index of clicked checkbox. Change disabled property
$(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("disabled", chk);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-3">
<label for="car-1-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-3">
<label for="car-2-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-3">
<label for="car-3-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-3">
<label for="car-4-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-3">
<label for="car-5-3"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-4">
<label for="car-1-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-4">
<label for="car-2-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-4">
<label for="car-3-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-4">
<label for="car-4-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-4">
<label for="car-5-4"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-5">
<label for="car-1-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-5">
<label for="car-2-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-5">
<label for="car-3-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-5">
<label for="car-4-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-5">
<label for="car-5-5"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
答案 1 :(得分：2)
如果您不希望在选择一个复选框时禁用复选框，则可以使用以下方法：
（这种工作就像一个单选按钮，但<tr class="row100">
<td class="column100 column1" data-column="column1">${Store1v1}</td>
<td class="column100 column2" data-column="column2">${Region1v1}</td>
<td class="column100 column3" data-column="column3">${Edition1v1}</td>
<td class="column100 column4" data-column="column4">${StockStatus1v1}</td>
<td class="column100 column5" data-column="column5">${Price1} €</td>
<td class="column100 column6" data-column="column6"><a href="${Affiliate1}" class="button">Shop Now</a></td>
</tr> s，而不是id）
name$(".cars-item input:checkbox").on('click', function() {
var box = $(this); // Checkbox just clicked
if (box.is(":checked")) { // If the checkbox was just checked
var box_id = $(this).attr('id'); // Get its id
var boxes_ids = box_id.substr(0, (box_id.length - 1)); // Remove last number to make a generic id
// Find checkboxes corresponding to generic id and uncheck them (except the one we checked)
$(".cars-item input:checkbox[id^='" + boxes_ids + "']").not(box).prop("checked", false)
}
// Here are the values of the selected checkboxes.
// I don't know which form you want, I've used an array
var checkeds = [];
$(".cars-item input:checkbox:checked").each(function(index) {
checkeds[index] = $(this).attr('id');
});
console.clear();
console.log("These are checked:", checkeds);
});.cars-item {
border-bottom: 1px solid gray;
}
ul {
/* Added to fully show console in snippet */
margin: 2px;
}
li {
display: inline;
}
希望它有所帮助。