如何实现选中两个复选框时禁用第三个？（基于Inputs.checkbox）

要实现你需要的「最多选2个，满2个后禁用未选选项，取消一个后恢复可选」的功能，直接用原生Inputs.checkbox的静态配置做不到，得利用Observable的响应式特性动态控制选项的禁用状态，具体实现如下：

完整实现代码 #

// 定义基础年份列表
const years = ["2020", "2021", "2022"];

// 动态生成带禁用状态的选项
const dynamicYearOptions = {
  get() {
    // 获取当前已选数量
    const selectedCount = year_range.length;
    // 给每个年份设置禁用规则：已选满2个且当前年份未被选中时禁用
    return years.map(year => ({
      name: year,
      disabled: selectedCount >= 2 && !year_range.includes(year)
    }));
  }
};

// 创建响应式复选框
viewof year_range = Inputs.checkbox(dynamicYearOptions, {
  value: ["2020", "2021"], // 初始选中2020和2021
  label: "Year Range"
});

逻辑说明 #

• 当已选年份数量达到2时，所有未被选中的年份会被标记为disabled: true，无法再勾选；
• 一旦取消任意一个已选年份，已选数量回到1，所有被禁用的选项会自动恢复可选；
• 把选项定义成带get方法的对象，是为了让它自动响应year_range的变化，实时更新每个选项的禁用状态。

更紧凑的写法 #

如果不想单独定义变量，也可以把动态选项直接写在Inputs.checkbox参数里：

viewof year_range = Inputs.checkbox(
  {
    get() {
      const selectedCount = year_range?.length || 2; // 初始已选2个，确保初始时第三个选项禁用
      return ["2020", "2021", "2022"].map(year => ({
        name: year,
        disabled: selectedCount >= 2 && !year_range?.includes(year)
      }));
    }
  },
  { value: ["2020", "2021"], label: "Year Range" }
);

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