时间戳

首页 > 解决方案 > 禁用除“选中”反应钩子以外的所有复选框

reactjs - 禁用除“选中”反应钩子以外的所有复选框

问题描述

我有产品列表，用户最多可以比较 4 个产品，当用户选中 4 个产品时，我想禁用所有复选框，因此用户不能选择其他产品进行比较，除非它取消选中 4 个复选框之一。

const [checkedddItems, setCheckedItems] = useState({checkedItems : {}})
const handleComparePackage = (e, packageId) => {
    const { id, checked } = e.target;
    const updatedCheckedItems = comparedPackages.includes(packageId)? { [id]: checked } : {checkedddItems, [id] : checked }
    console.log(updatedCheckedItems);
    setCheckedItems({checkedItems: updatedCheckedItems})
  }

{ insurancePackages.map((insPackage) => {
              return (
                <div className="col-lg-3 col-md-4 col-sm-6" key={insPackage.id}>
                  <div className="insurance-card active">
                    {compareSwitch &&
                      <div className="form-check">
                        <input 
                          className="form-check-input" 
                          type="checkbox"
                          id={insPackage.id}
                          checked={checkedddItems[insPackage.id]}
                          disabled={!checkedddItems[insPackage.id]}
                          onChange={(e) => { handleComparePackage(e, insPackage.id) }} />
                      </div>
                    }
                    <div className="thumb">
                      <img src="/insurance/logo.svg" alt="logo" />
                      </div>
                      <div className="title">
                        {insPackage.company.name}
                      </div>
                      <div className="text-detail">
                        {insPackage.description}
                        <br />
                        <Link href="/">
                          <a>View Package Details</a>
                        </Link>
                      </div>
                     </div>
                )
              })
            }

标签： reactjs

解决方案

据我所知，当满足以下条件时，您似乎需要某种方法来禁用所有复选框：

  • 该复选框未选中，
  • 检查项目总数 > 3

disabled这应该只是在 checkbox 的属性中变成一个简单的布尔语句<input/>。

<input 
  className="form-check-input" 
  type="checkbox"
  id={insPackage.id}
  checked={checkedddItems[insPackage.id]}
  disabled={!checkedddItems[insPackage.id] && checkedddItems.length > 3} // right here
  onChange={(e) => { handleComparePackage(e, insPackage.id) }} />

推荐阅读