如果选中 none 个复选框，则显示错误

Question

我有一堆复选框，如果选中 none 个复选框，则需要显示一条警告消息。

像这样，

唯一的规则是，如果复选框的none被选中，则提交时必须显示如上的警告消息，如果其中任何一个被选中则不会出现警告。

我的代码：

             <Form.Item
                    name="checkboxes"
                    valuePropName="checked"
                    rules={[
                      {
                        required: true,
                        message: "Please select atleast one working day",
                      },
                    ]}
                  >
                    <Checkbox onChange={this.sun}>Sun</Checkbox>
                    <Checkbox onChange={this.mon}>Mon</Checkbox>
                    <Checkbox onChange={this.tue}>Tue</Checkbox>
                    <Checkbox onChange={this.wed}>Wed</Checkbox>
                    <Checkbox onChange={this.thu}>Thu</Checkbox>
                    <Checkbox onChange={this.fri}>Fri</Checkbox>
                    <Checkbox onChange={this.sat}>Sat</Checkbox>
            </Form.Item>

在上面的代码中，即使点击了任何一个复选框，它也会显示警告。

所以，我厌倦了将规则更改为，

            rules={[
              {
                required:
                  this.state.mon &&
                  this.state.tue &&
                  this.state.wed &&
                  this.state.thu &&
                  this.state.fri &&
                  this.state.sat &&
                  this.state.sun === false,
                message: "Please select atleast one working day",
              },

但在上述情况下，如果选中复选框的 none，它甚至不会显示任何警告消息。

我使用 antd 作为 UI，复选框是从它导入的。（参考：https://ant.design/components/checkbox/）

Answer 1

这个条件，你确定吗？ false 仅适用于 sun。

this.state.mon &&
this.state.tue &&
this.state.wed &&
this.state.thu &&
this.state.fri &&
this.state.sat &&
this.state.sun === false

您的代码：“如果选择了 6 天并且星期日为假 - 则显示错误消息”

我猜你需要类似的东西


 {
   required: ![this.state.mon, this.state.tue, this.state.wed, this.state.thu, this.state.fri, this.state.sat, this.state.sun].some(d => !!d)
 }

如果选中 none 个复选框，则显示错误

show error if none of the checkboxes are selected

checkbox

reactjs

antd