代码之家 › 专栏 › 技术社区 › Triyugi Narayan Mani Harendra Kumar

如何限制React JS中所选复选框的数量?

antd reactjs javascript

Triyugi Narayan Mani Harendra Kumar · 技术社区 · 8 年前

我想将复选框的最大数目限制为3。同时,我还想创建一个选定值的数组。请注意,我正在使用 Ant design's checkbox . 代码如中所示 codesandbox.io .

handleCheckbox = (e) => {
    let qlen = document.querySelectorAll('input[type="checkbox"]:checked').length;
    if(qlen < 3) {
    if(e.target.checked) {
      this.setState({
        indstryValue: this.state.indstryValue.concat([e.target.value])
      });
    } else {
      var arr = this.state.indstryValue;
      arr = arr.filter(item => item !== e.target.value);
      this.setState({
        indstryValue: arr
      });
    }
  }

  var checks = document.querySelectorAll('input[type="checkbox"]');
  var max = 2;
  for (var i = 0; i < checks.length; i++)
    checks[i].onclick = selectiveCheck;
  function selectiveCheck(event) {
    console.log(event.target);
    var checkedChecks = document.querySelectorAll('input[type="checkbox"]:checked');
    if (checkedChecks.length >= max + 1)
      return false;
  }
}

1 回复 | 直到 8 年前

A G 8 年前

你可以利用反应 state 这样做。以下示例在选中两个复选框时有条件地禁用复选框。 Codesandbox

import React from "react";
import ReactDOM from "react-dom";
import { Checkbox, Row, Col } from "antd";

class CheckBoxed extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: []
    };
  }
  onChange = checkedValues => {
    this.setState(() => {
      return { checked: checkedValues };
    });
  };

  isDisabled = id => {
    return (
      this.state.checked.length > 1 && this.state.checked.indexOf(id) === -1
    );
  };
  render() {
    return (
      <Checkbox.Group style={{ width: "100%" }} onChange={this.onChange}>
        <Row>
          <Col span={8}>
            <Checkbox value="A" disabled={this.isDisabled("A")}>
              A
            </Checkbox>
          </Col>
          <Col span={8}>
            <Checkbox value="B" disabled={this.isDisabled("B")}>
              B
            </Checkbox>
          </Col>
          <Col span={8}>
            <Checkbox value="C" disabled={this.isDisabled("C")}>
              C
            </Checkbox>
          </Col>
          <Col span={8}>
            <Checkbox value="D" disabled={this.isDisabled("D")}>
              D
            </Checkbox>
          </Col>
          <Col span={8}>
            <Checkbox value="E" disabled={this.isDisabled("E")}>
              E
            </Checkbox>
          </Col>
        </Row>
      </Checkbox.Group>
    );
  }
}

ReactDOM.render(<CheckBoxed />, document.getElementById("container"));