在 React 中按名称禁用和取消选择复选框

Question

我有多个复选框，但条件是禁用特定名称检查的复选框。我已经做到了，但问题是当您先选中其他复选框然后选中要禁用的复选框时，复选框仍然存在。如果您想看一下，我已经在 stackblitz 上发布了代码。所以在下面的代码中，我想禁用所有点击“所有年龄段”的复选框。但是当您 select 其他复选框然后 select “所有年龄”复选框时，选中的复选框仍然存在，您可以取消 select 该复选框。如何删除禁用后选中的复选框。

// Example stateless functional component


// Example class component
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedItems: {}
    };
  }
  handleChange = (event, formKey) => {
    const { name, checked } = event.target;
    const updatedCheckedItems = { ...this.state.checkedItems, [name]: checked };
    this.setState(
      {
        checkedItems: updatedCheckedItems
      },
      () => console.log(this.state.checkedItems)
    );
  };
  
  render = () => {
    const checkedValues = { ...this.state.checkedItems };
    const checkboxes = [
      {
        name: "3-5",
        key: "1",
        label: "3-5"
      },
      {
        name: "6-7",
        key: "2",
        label: "6-7"
      },
      {
        name: "8-10",
        key: "3",
        label: "8-10"
      },
      {
        name: "11-13",
        key: "4",
        label: "11-13"
      },
      {
        name: "14-18",
        key: "5",
        label: "14-18"
      },
      {
        name: "18+",
        key: "6",
        label: "18+"
      },
      {
        name: "All ages",
        key: "7",
        label: "All ages"
      }
    ];
    
    return (
      <div className="App">
        <h1>App Component</h1>
        {checkboxes.map(item => (
          <label key={item.name}>
            <input
              type="checkbox"
              name={item.name}
              checked={this.state.checkedItems[item.name] || false}
              onChange={this.handleChange}
              disabled={!checkedValues[item.name] && checkedValues["All ages"]}
            />
            {item.name}
          </label>
        ))}
      </div>
    )
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

StackBlitz

Answer 1

在你的 handleChange 函数中，你应该像下面这样改变：

  handleChange = (event, formKey) => {
    const { name, checked } = event.target;
    // Changed line
    const updatedCheckedItems = name === 'All ages' ? { [name]: checked } : { ...this.state.checkedItems, [name]: checked };
    this.setState(
      {
        checkedItems: updatedCheckedItems
      },
      () => console.log(this.state.checkedItems)
    );
  };

如果复选框名称是 All ages，您应该删除所有其他复选框，如果不是，只需像往常一样在状态对象上再添加一个属性。

Answer 2

当你选择最后一个时，把这个清除所有其他选择。希望我理解正确。

StackBlitz

if (name === 'All ages') this.state.checkboxes.filter((option) => option.name !== name).forEach((option) => {
      console.log(option);
      updatedCheckedItems[option.name] = false;
    });

在 React 中按名称禁用和取消选择复选框

Disable and Deselect Checkboxes by name in React

javascript

checkbox

reactjs