ant-vue checkbox 多选只能选中一个demo

旧城等待， 2022-12-03 09:56 274阅读 0赞

> 多选框时,却只需要点击其中一个就让其他的选项失效,其实也是可以使用单选框来做,但是设计图的图标是和多选框长得一模一样,又不想去修改ant-vue单选框的样式,于是就做了这个demo

## html部分 ##

<a-checkbox-group v-model="value" name="checkboxgroup" :options="plainOptions" @change="onChange" >
    	<span slot="label" disabled="{disabled}" slot-scope="{ value }" style="color: red">{
       { value }}</span>
    </a-checkbox-group>

## js部分 ##

<script>
    	export default { 
    		data() { 
    			return { 
    				plainOptions: [
    					{  label: "Apple", value: 'Apple',disabled: false },
    					{  label: 'Pear', value: 'Pear' ,disabled: false },
    					{  label: 'Orange', value: 'Orange', disabled: false },
    				],
    				value: [],
    			};
    		},
    		methods: { 
    			onChange(checkedValues,options) { 
    				// console.log('checked = ', checkedValues);
    				console.log('value = ', this.value);
    				let data = this.plainOptions
    				for(let i =0; i< data.length ; i++){ 
    					data[i].disabled = true
    					if(data[i].value == this.value[0]){ 
    						data[i].disabled = false
    					}
    					if(this.value.length == 0 ){ 
    						data[i].disabled = false
    					}
    				}
    				this.plainOptions = data
    				
    			},
    		},
    		mounted() { 
    
    		}
    	}
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，274人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS_使用js中获取checkbox里选中的多个值，checkbox全选

获取checkbox里选中的多个值 <input type="checkbox" name="test" value="1"/><span>1</span>

朱雀/ 2023年01月15日 10:22/ 0 赞/ 166 阅读

相关 jq控制checkbox只能选中一个

<div class="memoRadio" id="memoRadio"> <label><input type="checkbox" onclick="c

灰太狼/ 2023年01月05日 12:11/ 0 赞/ 157 阅读

相关 vue 怎么将Checkbox 多选框选中的值提交

说好的学习计划来了，用十天的时间，深入了解一下饿了么的组件，简单的记录一下，首先上文档：资料相关星星指数：star:55k 中文文档：[https://elemen

悠悠/ 2022年12月13日 11:26/ 0 赞/ 287 阅读

相关 ant-vue checkbox 多选只能选中一个demo

> 多选框时,却只需要点击其中一个就让其他的选项失效,其实也是可以使用单选框来做,但是设计图的图标是和多选框长得一模一样,又不想去修改ant-vue单选框的样式,于是就做了这个

旧城等待，/ 2022年12月03日 09:56/ 0 赞/ 275 阅读

相关 ListView CheckBox多选

本实例可以直接嫁接与各类点餐APP上，当然你也可以发挥你的想象应用到其他项目之上，本实例主要实现的功能是，实现子类项目的单选、多选、全选和反选功能，点击确定时还能对应生成价格，

￡神魔★判官ぃ/ 2022年06月07日 03:24/ 0 赞/ 313 阅读

相关 JQuery 多个checkbox 只选中一个

<form id="common-form"> <input name="check1" type="checkbox"/>check1

本是古典何须时尚/ 2022年05月28日 01:57/ 0 赞/ 215 阅读

相关 BootStrap-table 复选框默认选中（checkbox）

bootstrap table colums 写法 var columns = \[\{ field : ‘checked’,

￡神魔★判官ぃ/ 2022年05月14日 10:35/ 0 赞/ 299 阅读

相关 uniApp 多选框checkbox ，判断是否选中

uniApp 多选框checkbox ，判断是否选中 ![4a9631149e30a9b4cbc600f5a5e3200e.jpg][]admin2019-04-25 【

╰半夏微凉°/ 2022年04月25日 09:42/ 0 赞/ 2874 阅读

相关控制多选框（input[type=checkbox]）选中状态

[https://www.jianshu.com/p/63e2d5d0d4da][https_www.jianshu.com_p_63e2d5d0d4da] [https_

墨蓝/ 2022年03月16日 04:30/ 0 赞/ 358 阅读

相关 EasyUI DataGrid Checkbox 多选获取选中行中的内容

　　　　<table id='grid' class='easyui-datagrid' style='width:950px;height:405px' 　

系统管理员/ 2021年09月29日 11:56/ 0 赞/ 443 阅读