Laravel10+Vue3复选框最多选3个：解决选中后无法取消问题

问题根源 #

你当前的代码存在两个关键问题：

• disabled属性里的n未定义，导致判断逻辑错误，选满后所有复选框都被禁用
• label标签里的rofession.id是拼写错误，会导致点击标签无法触发复选框状态变化

解决方案 #

调整disabled的判断逻辑，确保仅禁用未被选中且已达最大选择数的复选框，同时修正拼写错误：

修正后的前端模板代码

<div class="form-group group-sm offset-top-20">
  <div v-if="professions_data !== null" 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"
             @change="updateField"
             :disabled="value.length >= max && !value.includes(profession.id)">
      
      <label class="custom-control-label" 
             :for="profession.name_slug + '-' + profession.id">{{ profession.name }}</label>
    </div>
  </div>
</div>

关键修改点

1. 修正disabled逻辑：将value.indexOf(n) === -1替换为!value.includes(profession.id)，明确判断当前选项是否未被选中，同时当已选数量等于max时，仅禁用这些未选中的选项
2. 修正拼写错误：把label标签里的rofession.id改为profession.id，保证label和input的id对应，点击标签可正常切换复选框状态

Vue脚本代码（无需修改，保持原样）

data() {
    return {
        name: 'profession',
        professions_data: null,
        value: [],
        max:3
    }
},
methods: {
    updateField() {
        this.clearErrors(this.name);
        this.$emit('update:field', this.value)
    },
}

效果说明 #

修改后，当选中3个复选框时，其余未选中的复选框会被禁用，但已选中的复选框仍可点击取消选择，取消后未选中的复选框会重新恢复可用状态。

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