如何实现复选框组强制至少保留一个选中项的交互逻辑

安全阿岳

2026-10-15

现有逻辑评估

你当前编写的代码逻辑无法满足需求，存在以下核心问题：

遍历方法误用：Array.find() 的作用是查找第一个符合条件的元素后就终止遍历，你用它统计所有showDefault为false的项、以及批量修改所有复选框的disable属性，会导致遍历提前终止，统计结果和属性赋值都不完整。
判断依据偏离需求：现有逻辑以showDefault为true的项的数量作为判断阈值，和需求要求的「当前实际被用户选中的复选框数量」没有关联，就算用户已经勾选了多个项，只要默认显示的项只剩1个也会误触发禁用，完全不符合交互要求。
禁用目标匹配错误：lastField取的是最后一个showDefault为true的项，而不是用户操作后剩下的最后一个被勾选的项，会导致被禁用的复选框不是剩下的最后一个选中项。

优化调整方案

实现思路

每次复选框选中状态变更后，先统计所有可显示、且已被选中的复选框数量
若选中数量等于1，将唯一被选中的项设为禁用，其余可选项保持可用
若选中数量大于1，所有可选项全部解除禁用

优化后代码示例

// 复选框状态变更回调中执行以下逻辑
// 筛选所有可显示且已选中的选项
const checkedVisibleFields = this.checkBoxes.filter(item => item.showDefault && item.checked);
const isOnlyOneChecked = checkedVisibleFields.length === 1;
const onlyCheckedKey = isOnlyOneChecked ? checkedVisibleFields[0].key : null;

// 遍历更新所有选项的禁用状态
this.checkBoxes.forEach(item => {
  if (item.showDefault) {
    item.disable = isOnlyOneChecked && item.key === onlyCheckedKey;
  }
});