Next JS Button show on checked checkbox

Question

I have simpple code below. my goals is, if checkbox checked then button can click..

<button
className={`btn btn-xl text-6xl ${isChecked[0] == true? "bg-primary" : "bg-gray-700/20"} w-full h-12 my-4 font-semibold text-white ${isChecked[0] == true ? "" : "pointer-events-none"}`}>
Checkout
</button>

i have 2 value of checkbox

my problem is the button only check first index because i set isChecked[0].. i have try to mapping the isChecked but button doesn't show..

how to check index of isChecked dynamically ?

Answer 1

You can create a state variable using the useState and check the conditionally.

const [isDisabled, setIsDisabled] = useState(true);
  
function onCheck(e) {
  const checked = e.target.checked;
  if (checked) {
     setIsDisabled(false)
  }
  if (!checked) {
     setIsDisabled(true)   
  }
}

function clickButton(){
  alert("action goes here")
}

<input type="checkbox" onChange={onCheck} />
<button onClick={clickButton} disabled={isDisabled}>Click</button>