使用 hyperscript 实现“达到最大选中数后自动禁用未选中复选框”，支持实时计数、条件禁用与恢复，无需 javascript 手动绑定事件。

使用 hyperscript 实现“达到最大选中数后自动禁用未选中复选框”，支持实时计数、条件禁用与恢复，无需 javascript 手动绑定事件。

在表单交互中，常需限制用户最多选择 N 个选项（如“最多选 5 项”）。Hyperscript 提供了简洁、声明式的解决方案，可直接在 HTML 中通过 _ 属性完成逻辑控制，避免冗余 JS 脚本。

以下是一个完整、可靠且可复用的实现方案：

✅ 正确的 Hyperscript 逻辑（推荐写法）

将 Hyperscript 指令绑定到任意一个复选框容器或父级

上（建议放在最外层包裹容器），使用 on click 监听所有复选框的点击行为（）：

<div class="mb-4 overflow-scroll" _="on click from <input[type='checkbox']/>
        if length of <input:checked/> > 5
            add @disabled to <input:not(:checked)/>
        else
            remove @disabled from <input/>
        end">
    <p class="mb-0">= $stelle['angebot_headline'] ?? 'N/A' ?></p>
    <div class="form-text mt-0 mb-3">(Max. 5 auswählbar)</div>
    <?php foreach ($stelle['angebote'] ?? [] as $angebot): ?>= view('personalKampagne/stellenangebot/_angebot', ['angebot' => $angebot]) ?>
    <?php endforeach ?>
</div>

? 关键说明：

• on click from 精准监听复选框点击（比 on change 更可靠，因 checkbox 的 change 在部分浏览器中可能触发延迟或遗漏）；
• length of 动态获取当前已勾选复选框总数；
• add @disabled to 仅禁用未勾选的复选框，避免干扰已选状态；
• remove @disabled from 清除所有复选框的 disabled 属性（含已选和未选），确保状态完全恢复。

⚠️ 注意事项与最佳实践

• 不要用 on every change in ：该语法会频繁触发、性能低，且无法准确捕获 checkbox 状态变更源；应改用 on click from 。
• 阈值可配置化：若需支持不同页面不同上限（如有的限 5，有的限 8），建议用 data-threshold="5" 属性配合 get my dataset.threshold 动态读取，提升复用性：

  _="on click from <input>
      set limit to (get my dataset.threshold || 5)
      if length of <checked></checked> > limit
          add @disabled to <not></not>
      else
          remove @disabled from <input>
      end"

• 视觉反馈建议：可同步添加 CSS 类增强体验，例如为被禁用的复选框添加淡灰色样式：

  input:disabled + label { opacity: 0.6; cursor: not-allowed; }

✅ 补充：兼容性与调试技巧

• Hyperscript v1+ 支持上述语法；请确保引入最新版：

  <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>

• 开发时可临时加入 log 'Checked count:', length of 辅助验证逻辑执行；
• 若页面存在多个独立复选框组，请为每组设置唯一 data-group="offers" 并调整查询器为 ，避免跨组误控。

通过以上方案，你即可零 JS 代码、纯 HTML 声明式地实现专业级复选框数量管控，兼顾可维护性、可读性与用户体验。