AntD checkbox,限制选中数量

本文介绍了如何使用AntD实现checkbox多选功能,并限制最多只能选择两个选项。当达到最大限制时,其余选项将置灰。当取消选中一个或两个选项时,所有选项恢复可选状态。
摘要由CSDN通过智能技术生成

需求

checkbox多选框最多选中两个,选中两个后其余选项置灰;取消一个或两个选项后,所有项可选。
在网上找了一下,有这个需求但是没有实现,于是这里重写了一下,方便以后使用。

操作

1、选中一个选项
在这里插入图片描述
2、选中两个选项,此时已选两项,未选项置灰
在这里插入图片描述
3、取消一个选项,此时所有选项可选
在这里插入图片描述

代码

/**
 * checkout多选,最多选中两个,其余选项不可点击;取消选中后的项,所有选项可点击
 */
import React, {
    Component } from 'react';
import {
    Checkbox } from 'antd';
import './index.scss';

class MyCheckbox extends Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
   
            options: [
                
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值