如何有条件地禁用复选框？
如何有条件地禁用复选框？
提问于 2021-08-20 16:53:27
我有一个带有复选框的表单。选中最大复选框数时，我需要禁用该复选框。这就是我到目前为止所尝试的：
const maxOptions = 2;
const optionChecked = []
const checkedCount = optionChecked.length;
function handleChecked(e) {
let index;
if (e.target.checked) {
optionChecked.push(
e.target.value
)
} else {
index = optionChecked.indexOf(+e.target.value)
optionChecked.splice(index, 1)
}
console.log(optionChecked.length)
}
//my checkbox
{Opcoes.map((a) => (
<section className='product-options'>
<a>
<text> {a.Nome} </text>
<input type='checkbox'
value = {a.ID}
onChange = {(e) => handleChecked(e) }
disabled = {!optionChecked[a.ID] && checkedCount === maxOptions ? true: false}
></input>
</a>
</section>
))}回答 2
Stack Overflow用户
回答已采纳
发布于 2021-08-20 23:23:04
const maxOptions = 2;
const [checkedCount, setCheckedCount] =useState(0)
function handleChecked(e) {
e.target.checked?setCheckedCount(prevCount=>prevCount+1):setCheckedCount(prevCount=>prevCount-1)
}
console.log(checkedCount)
//my checkbox
{Opcoes.map((a) => (
<section className='product-options'>
<a>
<text> {a.Nome} </text>
<input type='checkbox'
value = {a.ID}
onChange = {(e) => handleChecked(e) }
disabled = { checkedCount ===maxOptions}
></input>
</a>
</section>
))}Stack Overflow用户
发布于 2021-08-26 21:54:56
如果你想启用选中的元素，你可以这样做：
import { useState, useRef, createRef } from "react";
function App() {
const maxOptions = 1;
const [checkedCount, setCheckedCount] = useState(0);
function handleChecked(e) {
e.target.checked
? setCheckedCount((prevCount) => prevCount + 1)
: setCheckedCount((prevCount) => prevCount - 1);
}
const Opcoes = [
{ Nome: "pepita", ID: "1" },
{ Nome: "pepito", ID: "2" },
];
let items = useRef(Opcoes.map(() => createRef()));
return (
<>
<div>
{Opcoes.map((a, ind) => (
<section className="product-options" key={ind}>
<a>
<text> {a.Nome} </text>
<input
type="checkbox"
value={a.ID}
onChange={(e) => handleChecked(e)}
ref={items.current[ind]}
disabled={
checkedCount === maxOptions &&
!items?.current[ind]?.current.checked
}
></input>
</a>
</section>
))}
</div>
</>
);
}
export default App;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68865631
复制相关文章
相似问题
腾讯云开发者
