Hyperscript 教程：动态限制复选框选择数量并禁用未选中项-html教程-PHP中文网

本文介绍如何使用 hyperscript 实现“当已选复选框超过阈值（如 5 个）时，自动禁用所有未选中项；当数量回落至阈值以下时，恢复全部可交互状态”的交互逻辑。

本文介绍如何使用 hyperscript 实现“当已选复选框超过阈值（如 5 个）时，自动禁用所有未选中项；当数量回落至阈值以下时，恢复全部可交互状态”的交互逻辑。

在构建表单时，常需对用户选择施加数量约束（例如“最多选 5 项”）。Hyperscript 提供了简洁、声明式的 DOM 交互能力，无需 JavaScript 手动监听事件或遍历节点——只需几行指令即可完成动态启用/禁用逻辑。

✅ 正确的 Hyperscript 实现

将以下 Hyperscript 指令添加到包含所有复选框的父容器（如

）上：

<div class="mb-4 overflow-scroll" _="on click
         if length of <input:checked/> > 5
             add @disabled to <input:not(:checked)/>
         else
             remove @disabled from <input/>
         end">
    <!-- 复选框列表（由 PHP 循环渲染） -->
</div>

? 说明：

on click 监听任意复选框的点击事件（比 on change 更可靠，因 checkbox 的 change 在某些浏览器中可能触发延迟或遗漏）；

选取当前页面中所有已勾选的元素；

精准匹配所有未勾选的复选框；

add @disabled to ... 是 Hyperscript 的属性操作语法，等效于设置 disabled="disabled"；

remove @disabled from 移除所有复选框的 disabled 属性（包括已禁用和原本就启用的），确保状态完全重置。

⚠️ 注意事项与最佳实践

避免作用域污染：若页面存在其他无关复选框（如筛选控件、全局开关），请限定选择器范围。推荐为业务复选框统一添加专属类名（如 class="offer-checkbox"），然后改用：
```
if length of <checked></checked> > 5
    add @disabled to <not></not>
else
    remove @disabled from <input.offer-checkbox></input.offer-checkbox>
```
初始状态兼容性：页面加载时若已有预选中的复选框（如服务端回显），需在 DOM 加载完成后主动触发一次校验。可在父容器添加 on load 钩子：
```
on load, click
```
无障碍友好：禁用未选中项后，应同步更新 aria-disabled="true"（Hyperscript 不原生支持 aria-* 属性操作，需配合 put ... into ... 或 JS 回调）。更推荐方案是：仅禁用视觉交互，同时用 aria-describedby 指向提示文案（如“已达最大选择数，取消某项以继续”），兼顾可访问性与实现简洁性。

阈值可配置化（进阶）：将硬编码的 5 替换为数据属性，提升复用性：

<div _="on click
    set maxAllowed to the closest <div/>'s `data-max-select` or 5
    if length of <input:checked/> > maxAllowed
        add @disabled to <input:not(:checked)/>
    else
        remove @disabled from <input/>
    end" data-max-select="5">
<h3>✅ 总结</h3>
<p>该方案以极简 Hyperscript 指令实现了强约束的多选交互，核心优势在于：</p>
<ul>
<li>
<strong>零 JS 依赖</strong>：纯 Hyperscript 声明式逻辑；</li>
<li>
<strong>高响应性</strong>：基于原生事件，无性能损耗；</li>
<li>
<strong>易维护</strong>：逻辑集中、语义清晰、修改阈值或选择器成本极低。</li>
</ul>
<p>只需将指令挂载到父容器，即可让整个复选框组智能响应用户操作——是现代轻量级表单控制的理想实践。</p>
</div>