本文详解如何在 vue 3（兼容 options api）中实现「最多勾选 n 项复选框」的交互逻辑——当选满 3 项后，未选中的选项自动禁用，而已选中的仍可取消勾选，避免误锁已选状态。
本文详解如何在 vue 3（兼容 options api）中实现「最多勾选 n 项复选框」的交互逻辑——当选满 3 项后，未选中的选项自动禁用，而已选中的仍可取消勾选，避免误锁已选状态。
在构建表单时，常需对用户选择施加约束，例如“最多选择 3 个职业”。若简单地在 v-model 数组长度超过阈值时全局禁用所有复选框（如 :disabled="value.length > max"），会导致已选中的项也无法取消——这违背了用户体验基本准则。正确方案应动态区分禁用状态：仅禁用「当前未被选中且已达上限」的选项，而保留已选项的可操作性。
✅ 核心思路：用计算属性动态生成「应禁用的 ID 列表」
关键在于将「禁用逻辑」从布尔判断升级为基于数据身份的条件过滤。我们不直接判断 value.length > max，而是：
- 定义一个计算属性 inactivatedProfessions，它返回当前应被禁用的 profession.id 数组；
- 当 value.length
- 当 value.length >= max 时，它筛选出 professions_data 中 ID 不在 value 内的所有项 → 即“剩余未选的选项”；
- 每个复选框通过 :disabled="inactivateProfession(profession)" 调用方法，检查自身 ID 是否在该禁用列表中。
这样，已选中的项永远不在禁用列表内，自然保持可取消状态；未选中的项在达到上限后立即失效，阻止超额选择。
? Options API 实现（适配 Laravel + Vue 3 混合项目）
以下为可直接集成到你现有 .vue 组件中的完整代码（已适配你的 professions_data 结构和 value 命名）：
立即学习“前端免费学习笔记（深入）”；
<template>
<div class="form-group group-sm offset-top-20">
<div v-if="professions_data" v-for="(profession, index) in professions_data" :key="profession.id">
<div class="custom-control custom-checkbox d-inline-block" style="width: 350px">
<input
class="custom-control-input"
:id="profession.name_slug + '-' + profession.id"
name="profession"
:value="profession.id"
v-model="value"
type="checkbox"
:disabled="inactivateProfession(profession)"
@change="updateField"
/>
<label class="custom-control-label" :for="profession.name_slug + '-' + profession.id">
{{ profession.name }}
</label>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ProfessionSelector',
props: {
// 若 professions_data 来自父组件或 Laravel Blade 传入，建议声明 props
professionsData: {
type: Array,
default: () => []
}
},
computed: {
// 动态生成当前应禁用的职业 ID 列表
inactivatedProfessions() {
if (this.value.length >= this.max) {
return this.professions_data
.filter(prof => !this.value.includes(prof.id))
.map(prof => prof.id);
}
return [];
}
},
methods: {
// 判断某职业是否应被禁用
inactivateProfession(profession) {
return this.inactivatedProfessions.includes(profession.id);
},
updateField() {
this.clearErrors('profession');
this.$emit('update:field', this.value);
},
// 可选：提供清空方法（便于调试或重置）
clearErrors(fieldName) {
// 请根据你实际的错误处理逻辑实现，例如 this.errors[fieldName] = null;
}
},
data() {
return {
name: 'profession',
// 注意：此处使用 props 优先，若数据来自 Laravel Blade 的 inline script，请确保已正确赋值
professions_data: this.professionsData || [],
value: [],
max: 3
};
}
};
</script>⚠️ 注意事项与最佳实践
-
数据来源一致性：确保 professions_data 是响应式数组（如通过 axios 获取或由 Blade 渲染为 JSON 后 JSON.parse() 初始化）。若直接在 Blade 中注入，推荐写法：
@props(['professions' => []]) <div id="app" :professions-data='@json($professions)'></div>
并在组件 props 中接收。
v-model 绑定安全：v-model 在复选框中绑定数组时，会自动处理添加/移除逻辑，无需手动 push/splice —— 这是 Vue 的内置行为，务必保留。
-
性能优化提示：对于超大职业列表（>1000 项），filter().map() 可能轻微影响响应速度。此时可考虑用 Set 预存已选项 ID 提升查找效率：
computed: { inactivatedProfessions() { const selectedSet = new Set(this.value); if (this.value.length >= this.max) { return this.professions_data .filter(prof => !selectedSet.has(prof.id)) .map(prof => prof.id); } return []; } } -
无障碍（a11y）补充：禁用状态应配合视觉反馈（如灰色文字、cursor: not-allowed），并在
<label :class="{ 'text-muted': inactivateProfession(profession) }"> {{ profession.name }} <span v-if="inactivateProfession(profession)" class="small text-muted">(已达上限)</span> </label>
✅ 总结
本方案通过「计算属性生成动态禁用 ID 列表 + 方法级状态校验」双层逻辑，精准实现了「选满即锁、已选可退」的交互目标。它不侵入原始数据结构，不依赖副作用，完全符合 Vue 响应式设计原则，且无缝兼容 Laravel 后端数据注入场景。无论你使用 Composition API 还是 Options API，核心思想一致：禁用决策必须基于每项的唯一标识（如 id），而非全局布尔开关。
