下一个 JS 按钮显示在选中的复选框上

Question

下面是简单的代码。我的目标是，如果复选框被选中，那么按钮可以点击..

<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

我的问题是按钮只检查第一个索引，因为我设置了 isChecked[0].. 我尝试映射 isChecked 但按钮不显示..

如何动态查看isChecked的索引？

Answer 1

您可以使用 useState 创建状态变量并有条件地检查。

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>

下一个 JS 按钮显示在选中的复选框上

Next JS Button show on checked checkbox

next.js