Question

我有一个<select>标记部分，如果要禁用这些选项，我希望在其中。我尝试同时使用disabled="false"和disabled="true"

无论我使用哪个，所有选项都显示为已禁用。

这是我的代码：

<select className="form-control " onChange={this.drugsChange.bind(this)} value={this.state.drug_type}>
   <option value='-1' disabled="true">Select Medication Class</option>
   <option value='Medication Clause A' disabled="false"> Medication Class A</option>
   <option value='Medication Clause B' disabled="false"> Medication Class B</option>
   <option value='Medication Clause C' disabled="true"> Medication Class C</option>
</select>

我希望不禁用A类药物和B类药物

Answer 1

嘿，只需对要禁用的用户尝试禁用，而无需提供不想禁用的已禁用密钥。

<select className="form-control " onChange={this.drugsChange.bind(this)} value={this.state.drug_type}>
   <option value='-1' disabled>Select Medication Class</option>
   <option value='Medication Clause A'> Medication Class A</option>
   <option value='Medication Clause B'> Medication Class B</option>
   <option value='Medication Clause C' disabled> Medication Class C</option>
</select>

如果此方法不起作用，可以给disabled={true}

Answer 2

工作代码和框example。

disabled不需要设置布尔值。仅提及它就意味着要禁用option标签。作为回应，如果您要进行条件检查，可以执行

 <select className="form-control">
    <option value="-1" disabled={counter !== 0} selected>
        Select Medication Class
    </option>
    <option value="Medication Clause A" disabled={counter === 0}>
        {" "}
        Medication Class A
    </option>
    <option value="Medication Clause B"> Medication Class B</option>
    <option value="Medication Clause C" disabled={counter === 0}>
        {" "}
        Medication Class C
    </option>
</select>

假设counter是一个状态变量。

在您当前的情况下，只需禁用即可。

<option disabled selected>
  Select Medication Class
</option>

选项标签禁用属性

2 个答案: