Vue如何选中一个同时禁用其它复选框

冰柠檬x

已于 2022-09-07 17:39:50 修改

阅读量1.4k

点赞数

文章标签： elementui vue.js 前端框架 javascript

于 2022-09-07 17:39:07 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45914210/article/details/126750444

版权

本文介绍如何在ElementUI的Checkbox组件中，通过闭包实现选中一个选项时其他选项被禁用的功能。通过`acceptChange`方法和`disabled`属性，展示了如何动态控制多选框的可用状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写自定义目录标题

Element ui 组件 [Checkbox 多选框]

Element ui 组件 [Checkbox 多选框]

效果图展示
需求：当我们选中其中一个选项时，其它的选项应该被禁用

闭包写法 
 <el-checkbox @change="(e) => acceptChange(e, 0)" :disabled="acceptStatus === 1">接收</el-checkbox>
 <el-checkbox @change="(e) => acceptChange(e, 1)" :disabled="acceptStatus === 0">扫描</el-checkbox>

    acceptChange(val, from){ 
        if (val) {
            this.acceptStatus=from
        } else {
            this.acceptStatus=null
        } 
    },