uniapp 复选框禁用 - 点击切换禁用状态

在uniapp中，可以通过设置数据的方式来禁用复选框选项。具体的实现步骤如下：\n\n1. 在 data 中定义一个数组，用于存储复选框选项的禁用状态：\n\n\ndata() {\n return {\n options: [\n { name: '选项1', disabled: false },\n { name: '选项2', disabled: false },\n { name: '选项3', disabled: false }\n ]\n }\n}\n\n\n2. 在模板中使用 v-for 指令遍历 options 数组，并绑定复选框的禁用状态：\n\n\n<template>\n <view>\n <checkbox-group>\n <view v-for="(option, index) in options" :key="index">\n <checkbox :value="option.name" :disabled="option.disabled" @change="handleCheckboxChange"></checkbox>\n <text>{{ option.name }}</text>\n </view>\n </checkbox-group>\n </view>\n</template>\n\n\n3. 在方法中处理复选框选项的禁用状态变化：\n\n\nmethods: {\n handleCheckboxChange(event) {\n const selectedOption = event.target.value;\n const updatedOptions = this.options.map(option => {\n if (option.name === selectedOption) {\n option.disabled = !option.disabled;\n }\n return option;\n });\n this.options = updatedOptions;\n }\n}\n\n\n通过以上步骤，当点击复选框时，会触发 handleCheckboxChange 方法，方法中会更新对应选项的禁用状态，从而实现禁用该选项。