如何阻止ion-checkbox动态赋值[checked]时触发ionChange，仅点击时生效

问题根因 #

Ionic的ionChange事件默认会在复选框选中状态发生任何变化时触发，无论变化来自用户手动交互还是代码动态赋值，这是框架原生的设计逻辑。

可行解决方案 #

方案1：添加标志位区分赋值场景（兼容性最好，推荐）

该方案可以同时兼容手动点击、键盘操作选中的无障碍场景，不会影响原有业务逻辑：

1. 在组件类中定义一个标志位，区分当前状态变化是代码动态赋值触发还是用户手动触发
2. 所有动态修改item.selected的逻辑执行前先标记为代码赋值，修改完成后重置标记
3. 在ionChange回调中判断标志位，过滤掉代码赋值触发的事件

代码示例：

// 组件类中定义标志位
isProgrammaticUpdate = false;

// 你原来动态修改选中状态的逻辑示例
updateItemSelected() {
  this.isProgrammaticUpdate = true;
  // 此处替换为你自己给item.selected赋值的业务代码
  this.item.selected = true;
  // 等待状态更新完成后重置标志位
  setTimeout(() => {
    this.isProgrammaticUpdate = false;
  }, 0)
}

async onSectionRolesCheckBoxChange(item: ISectionRole, event) {
  // 新增判断：代码赋值触发的事件直接跳过
  if (this.isProgrammaticUpdate || !event) {
    return;
  }
  // 此处保留你原来的业务逻辑
}

模板代码无需修改，保持原有写法即可。

方案2：替换监听事件（适合无需无障碍适配的简单场景）

如果你的业务不需要支持键盘回车、空格选中复选框的场景，可以直接将ionChange替换为click事件，该事件仅会在用户手动点击元素时触发，代码修改选中状态不会触发：

<ion-checkbox slot="end" (click)="onSectionRolesCheckBoxChange(item, $event)" 
    [checked]="item.selected">
</ion-checkbox>

如果需要兼容键盘操作，可以额外绑定keyup事件，判断按下的是回车/空格时执行回调逻辑即可。

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