如何用Hyperscript根据选中状态统计并禁用复选框？

直接修正外层容器的Hyperscript逻辑即可，核心是监听复选框的变化、统计选中数量，再根据阈值控制未选中复选框的禁用状态：

<div class="mb-4 overflow-scroll" _="on every change in input[type=checkbox]
    set checkedCount to count of <input[type=checkbox]:checked/>
    set threshold to 5
    if checkedCount >= threshold
        for each checkbox in <input[type=checkbox]:not(:checked)/>
            set checkbox.disabled to true
    else
        for each checkbox in <input[type=checkbox]:disabled/>
            set checkbox.disabled to false
">
    <p class="mb-0"><?= $stelle['angebot_headline'] ?? 'N/A' ?></p>
    <div class="form-text mt-0 mb-3">(Max. 8 auswählbar)</div>
    <?php foreach ($stelle['angebote'] ?? [] as $angebot): ?>
        <?= view('personalKampagne/stellenangebot/_angebot', ['angebot' => $angebot]) ?>
    <?php endforeach ?>
</div>

关键修正点 #

• 事件监听目标：把监听对象从<div.form-check/>改成input[type=checkbox]，因为只有复选框会触发change事件，外层div不会。
• 选中数量统计：用count of <input[type=checkbox]:checked/>直接获取已选中的复选框数量，无需额外遍历。
• 阈值判断逻辑：
  • 当选中数≥5时，遍历所有未选中的复选框，设置disabled=true禁用它们；
  • 当选中数<5时，遍历所有被禁用的复选框，恢复disabled=false重新启用。

原代码失效原因 #

1. 监听了错误的元素：div.form-check不会触发change事件，导致逻辑根本不会执行；
2. 变量赋值错误：set allCheckboxes to <div.form-check/>拿到的是外层容器元素，不是复选框，无法统计选中状态。

内容的提问来源于stack exchange，提问作者Simon Weber