关于Checkbox多选框的问题 ant design

Question

我这边有个需求是这样的，多选框用户不能操作，只能通过后端接口数据返回来勾选选项，我加了禁止属性，发现一些问题。
如果子类里面的多选框都没勾选，怎样能让顶级选项框默认为空？
如果子类里面的多选框一个勾选上，怎样能让顶级选项框里面为默认一条横线？
如果子类里面的多选框全部勾选上，怎样能让顶级选项框为默认勾选？

demo链接：
https://codepen.io/pen/?edito...

const { Checkbox } = antd;
const CheckboxGroup = Checkbox.Group;

const plainOptions = [{ label: 'Orange', value: 'Orange', disabled: true },{ label: 'Apple', value: 'Apple', disabled: true },{ label: 'Pear', value: 'Pear', disabled: true }];
const defaultCheckedList = ['Apple', 'Pear', 'Orange'];

class App extends React.Component {
state = {

checkedList: defaultCheckedList,
indeterminate: true,
checkAll: false,

};
render() {

return (
  <div>
    <div style={{ borderBottom: '1px solid #E9E9E9' }}>
      <Checkbox defaultChecked={true} disabled
        indeterminate={this.state.indeterminate}
        onChange={this.onCheckAllChange}
        checked={this.state.checkAll}
      >
        Check all
      </Checkbox>
    </div>
    <br />
    <CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />
  </div>
);

}
onChange = (checkedList) => {

this.setState({
  checkedList,
  indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),
  checkAll: checkedList.length === plainOptions.length,
});

}
onCheckAllChange = (e) => {

this.setState({
  checkedList: e.target.checked ? plainOptions : [],
  indeterminate: false,
  checkAll: e.target.checked,
});

}
}

ReactDOM.render(<App />, mountNode);