如何在反应中将复选框的数量限制为一定数量？

Question

1. This is the code for the checkboxes and I would like to limit the choices to 2.
2. This is going to be used for a pizza application, so the limit number will be different for the different sections in creating a pizza.

const LagDinEgen = () => {
    return(
   <div>
        <form name="størrelse">
            <div className="desktop:w-3/4 tablet:w-11/12 w-full mx-auto grid grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3 rounded-lg overflow-hidden desktop:mt-8 gap-2">
                <div className="col-span-1 tablet:col-span-2 desktop:col-span-3 bg-mainBlue py-10 h-auto text-center text-white flex flex-col justify-center items-center">
            
                    <h1 class="mb-6 pt-6 mx-auto text-center"> VELG STØRRELSE</h1>
                    <div class="mx-auto max-w-sm text-center flex flex-wrap justify-center">

                        <div class="flex items-center mr-4 mb-4">
                            <input id="radio1" type="checkbox" name="radio" class="hidden"/>
                            <label for="radio1" class="flex items-center cursor-pointer px-3">
                            <span class="w-4 h-4 inline-block mr-1 border border-mainGreen rounded-full"></span>
                            SMALL</label> <label>129,-</label>
                        </div>

                        <div class="flex items-center mr-4 mb-4">
                            <input id="radio2" type="checkbox" name="radio" class="hidden" />
                            <label for="radio2" class="flex items-center cursor-pointer px-3">
                            <span class="w-4 h-4 inline-block mr-1 border border-mainGreen rounded-full"></span>
                            MEDIUM</label> <label>159,-</label>
                        </div>

                        <div class="flex items-center mr-4 mb-4">
                            <input id="radio3" type="checkbox" name="radio" class="hidden" />
                            <label for="radio3" class="flex items-center cursor-pointer px-3">
                            <span class="w-4 h-4 inline-block mr-1 border border-mainGreen rounded-full"></span>
                            LARGE</label> <label>189,-</label>
                        </div>
                    </div>
                </div>
            </div>
        </form>

Answer 1

Assuming you plan on adding a button, you can utilize the native HTML5 disabled property on it and maintain the state of which items are currently selected to determine when it should be disabled(eg. an array of selectedItems )

You would pass the selectedItems.length > 2 to the disabled property, so it would effectively become disabled if your array is larger than 3.

Working example: https://codesandbox.io/s/xenodochial-currying-eb8kt?file=/src/Form.js

Answer 2

You should pass necessary datas to LagDinEgen component as props and then you should use array.map() function inside of JSX. This will be something gonna like that;

const LagDinEgen = ({title,options}) => {
    return(
   <div>
        <form name="størrelse">
            <div className="desktop:w-3/4 tablet:w-11/12 w-full mx-auto grid grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3 rounded-lg overflow-hidden desktop:mt-8 gap-2">
                <div className="col-span-1 tablet:col-span-2 desktop:col-span-3 bg-mainBlue py-10 h-auto text-center text-white flex flex-col justify-center items-center">
                    <h1 class="mb-6 pt-6 mx-auto text-center"> {title} </h1>
                    <div class="mx-auto max-w-sm text-center flex flex-wrap justify-center">
                        {
                            options.map((option,index)=>(
                                <div class="flex items-center mr-4 mb-4">
                                    <input type="checkbox" name="radio" class="hidden"/>
                                    <label class="flex items-center cursor-pointer px-3">
                                    <span class="w-4 h-4 inline-block mr-1 border border-mainGreen rounded-full"></span>
                                    {option.name}</label> <label>{option.price},-</label>
                                </div>
                            ))
                        }
                    </div>
                </div>
            </div>
        </form>