How to limit number of checkboxes to certain number in react?-CodePudding

This is the code for the checkboxes and I would like to limit the choices to 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>

CodePudding user response：

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

CodePudding user response：

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>