使用checkBox组件时，动态设置disabled，仍能触发click事件的原因及解决办法

在使用vant的Checkbox组件时，为了实现复选框组选择一个，禁用掉另一个，同时添加点击事件的功能时。遇到明明disabled=true，但仍能触发点击事件的情况。为此，分析下触发点击事件的原因及解决方法。

一、原因

1、异步更新

异步更新：
Vue 在处理数据更新时可能会使用异步更新队列。
当点击复选框时，Vue 可能会首先触发 click 事件，然后在稍后的时间异步更新数据，以及复选框的 disabled 属性。这样，即使 disabled 在 click 事件触发时是 true，但实际的禁用状态可能会在稍后的异步更新中改变。
因此，虽然看起来复选框被禁用了，但在点击瞬间仍然可以触发 click 事件。

2、事件冒泡

事件冒泡：
在某些情况下，即使元素被禁用，它仍然可以触发事件。
这是因为事件处理可能发生在 DOM 层级中的某个节点上，然后通过事件冒泡传递到父元素，从而触发父元素上的事件处理程序。
这可能是导致你看到复选框仍然触发 click 事件的原因之一。

二、解决方法

1、使用 @change 事件

使用 @change 事件替代 @click 事件，因为 @change 事件通常在值发生变化后触发，而不受禁用状态的影响。

2、在点击方法内部，检查复选框的禁用状态，如果它是禁用的，则不执行进一步的操作。

methods: {
  clickCheckBox(event) {
    if (event.target.disabled) {
      return;
    }
    // 进一步的逻辑
  }
}