How to gray out options in dropdown when certain variation is choosen instead of dissappearing

I am looking for a way to gray out the options in the dropdown of a woocommerce product page. Currently i have 520 variations for a product. Example below.

Here is the link to the product page:

So essentially it works as needed, however i wanted to know if there is a way to still show all the options for each dropdown, which would be grayed out, and the available options for a particular variation would still show as is now.

Like if i were to choose “Appliance Bases” under the “Cabinet Categories” drop-down, all the options for “Description” and “Dimensions” would still show, but be grayed out and not available to click, instead of just disappearing when it is filtered.

Any help would be appreciated:)


How to get disable the form based on form choosen?

I have two forms MidtermForm and FinalTrem form. i have to import these two components in StudentGradeForm. Now I want to choose that MidTermForm is only editable although and finalTermForm is disabled whether I am choose that FinalTermForm is only editable and Midterm form is disabled.If I select both are editable? I have to put two flags in state first? How to get it?

const FormItem = AntDForm.Item  const studentStatus = [{ key: 'NoOption', value: 'No Option' }]  const gridStyle = { width: '100%', textAlign: 'center',  };     class StudentGradeForm extends React.Component {      state = {         MidTermForm: false,         FinalForm: false     }     componentDidMount = (values) => {         alert("component is called.....")         this.setState({             MidTermForm: true,             FinalTermForm: true         })         if (this.state.MidTermForm === true) {              return <FinalTermForm disabled />         }         else if (this.state.FinalTermForm === true) {              return <FinalTermForm disabled />         }      }       render() {         const { handleSubmit } = this.props         return (             <div style={{ color: '#FFF000' }}>                  <Form onSubmit={handleSubmit}>                      <Card title="MidTerm Form"                         align="left"                         size="small"                         type="inner"                         bordered={false}>                          <Card.Grid style={gridStyle}><MidTermForm  />                    </Card.Grid>                      </Card>                      <Card title="FinalTerm Form"                         align="left"                         style={{ marginTop: 16 }}                         size="small"                         type="inner"                         bordered={false}>                          <Card.Grid style={gridStyle}><FinalTermForm />} />                      </Card.Grid>                      </Card>                      <Row style={{ marginTop: 10 }}>                         <Col span={16}>                             <Field                                 label="Student Status"                                 name="studentstatus"                                 component={AntSelect}                                 selectOptions={studentStatus}                                 style={{ width: 200 }}                                 formitemlayout={formItemLayout}                             />                         </Col>                      </Row>                      <Row style={{ padding: 0, margin: 0 }}>                         <Col align="right"><b>* %of the total grade for the year</b></Col>                     </Row>                      <FormItem {...tailFormItemLayout}>                          <Row>                              <Col span={10} push={2}>                                 <Button type="primary" style={{ width: 120 }}>Cancel</Button>                             </Col>                             <Col span={8} pull={1}>                                 <Button type="primary" htmlType="submit">                                     Submit Scores                                 </Button>                             </Col>                         </Row>                      </FormItem>                  </Form>              </div>         )     }      } 

Here I wrap the form using withFormik and submit the values using handleSubmit

const StudentGradeCards = withFormik({  handleSubmit(values, { resetForm }) {     resetForm();     console.log(values)     console.log("studentScore is", values.writtenexam)  }  })(StudentGradeForm)   export default StudentGradeCards