javascript - 如何使用 .siblings() 在 javascript 中定位 ul li 输入复选框项目

Question

我有以下 javascript 代码，适用于大多数复选框，其中脚本确定是否选中了 1 个以上的复选框，如果是，它会隐藏其余的复选框:

var limit = 1;

$('input[type="checkbox"]').on('change', function(evt) {
    console.log('checkboxSelectedLimit: detects checkbox');
    if ($(this).siblings(':checked').length >= limit) {
        this.checked = false;
        console.log('too many checkboxes selected');
    }
});

使用以下 html 结构:

<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>

然而，当我将我的复选框移动到如下有序列表中时:

<ul>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2</li>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3</li>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4</li>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5</li>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1</li>
</ul>

我的 javascript 确实触发了它被检查，但是 .siblings() 似乎没有触发，因为它不起作用。我假设我需要更新此脚本以定位 ul li 中的项目，但当我更改时:

$('input[type="checkbox"]').on('change', function(evt)

到

$('ul li input[type="checkbox"]').on('change', function(evt)

它不起作用。

比我聪明的人会非常感激任何帮助。

Answer 1

结构是 li > input，所以你需要找 li 对象来代替。

var limit = 1;

    $('input[type="checkbox"]').on('change', function(evt) {
        console.log('checkboxSelectedLimit: detects checkbox');
        if($(this).parent().siblings().find("input[type=checkbox]:checked").length >= limit) {
            this.checked = false;
            console.log('too many checkboxes selected');
        }
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2</li>
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3</li>
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4</li>
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5</li>
<li><input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1</li>
</ul>