我在使用 uniapp 开发小程序的过程中，遇到了小小的问题。当我勾选 checkbox 后，我会去进行一些校验，若校验没有通过，需要再取消这次的勾选。如下：

<template>
  <checkbox-group @change="checkboxChange">
    <label>
      <checkbox value="cb" :checked="checked" />
      选中
    </label>
  </checkbox-group>
</template>
<script>
  export default {
    data() {
      return {
        checked: false,
      };
    },
    methods: {
      checkboxChange(event) {
        if (Array.isArray(event.detail.value) && event.detail.value.length) {
          // 选中的操作

          checkOpenId().then((isValid) => {
            if (!isValid) {
              // 不生效
              this.checked = false;
            }
          });
        } else {
          this.checked = false;
        }
      },
    },
  };
</script>

但我不管怎么设置他的checked属性都不管用。

复选框组件（checkbox 组件） 的问题，因为复选框组件没有 @change 事件，checkbox-group 组件拥有 @change 事件，事件返回的结果是当前复选框组中已经勾选的值，但并未同步修改 checked 属性。该组件是直接切换的组件状态，然后触发的 change 事件，并没有同步更新 checked 属性所绑定的值。所以开关组件默认 checked 属性为 true 的时候，点击组件本身会将组件的状态切换为关，但是 checked 属性的并没有改变。

解决方案就是在 @change 的事件中，首先将 checked 设置为 true，然后再想设置成 false 的时候，就可以生效了。

<script>
  export default {
    data() {
      return {
        checked: false,
      };
    },
    methods: {
      checkboxChange(event) {
        if (Array.isArray(event.detail.value) && event.detail.value.length) {
          // 选中的操作
          this.checked = true; // 先将其设置true

          checkOpenId().then((isValid) => {
            if (!isValid) {
              this.checked = false;
            }
          });
        } else {
          this.checked = false;
        }
      },
    },
  };
</script>

原文来自：https://www.xiabingbao.com/post/uniapp/uniapp-checkbox-checed-s18nnz.html

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12567