Antd checkbox, limit the selected quantity

demand

checkbox Select at most two in the multiple selection box , When two are selected, the remaining options are grayed out ; After canceling one or two options , All items are optional .
I found it on the Internet , There is this requirement but it has not been realized , So here is a rewrite , Convenient for future use .

operation

1、 Select an option

2、 Check the two options , Two items have been selected , No option grayed out

3、 Cancel an option , At this time, all options are optional

Code

/** * checkout multi-select , Select up to two , Other options are not clickable ; Uncheck the item , All options can be clicked  */
import React, {
     Component } from 'react';
import {
     Checkbox } from 'antd';
import './index.scss';

class MyCheckbox extends Component {
    
    constructor(props) {
    
        super(props);
        this.state = {
    
            options: [
                {
    label: ' Arbutus ', value: ' Arbutus ', disabled: false},
                {
    label: ' Coconut Latte ', value: ' Coconut Latte ', disabled: false},
                {
    label: ' strawberry ', value: ' strawberry ', disabled: false},
                {
    label: ' sukiyaki ', value: ' sukiyaki ', disabled: false},
                {
    label: ' lemon ', value: ' lemon ', disabled: false},
                {
    label: ' Sprite ', value: ' Sprite ', disabled: false},
            ],
        }
    }

    onChange = (checkedList) => {
    
        const {
     options } = this.state;
        let valueList = options.map(item => item.value);
        let disList = [];
        valueList.forEach(item => {
    
            if(!checkedList.includes(item)) {
    
                disList.push(item);
            }
        });
        if(checkedList.length === 2) {
    
            for(let i in options) {
    
                for(let j in disList) {
    
                    if(options[i].value === disList[j]) {
    
                        options[i].disabled = true;
                    }
                }
            }
        } else {
    
            for(let i in options) {
    
                options[i].disabled = false;
            }
        }
    }

    render() {
    
        const {
     options } = this.state;
        return(<div className='my-checkbox'>
            <Checkbox.Group
                options={
    options}
                onChange={
    this.onChange}
            />
        </div>)
    }
}

export default MyCheckbox;