Option tag disable property

Question

I have a <select> tag section in which I want some if the options to be disabled. I have tried using both disabled="false" and disabled="true"

No matter which I use, all options are appearing as disabled.

Here is my code:

<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>

I want Medication Class A and Medication Class B to be not disabled

What do you mean by "I am having an select Tag in select tag". Is it nested? If yes, can you post the that markup too? — HalfWebDev, May 08 '19 at 06:16
Just removed the `disabled` specifier completely from the tags you want to be enabled. EX: .`` — Christopher Bennett, May 08 '19 at 06:18
Possible duplicate of [Make some options in a select menu "unselectable"](https://stackoverflow.com/questions/17316540/make-some-options-in-a-select-menu-unselectable) — Dennis, May 08 '19 at 06:21

score 0 · Accepted Answer · edited May 08 '19 at 06:19

0

Hey just try disabled for those which you want to be disabled and no need of giving the disabled key for which you want not to be disabled.

<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>

try this if it is not working you can give disabled={true}

edited May 08 '19 at 06:19

xmaster

1,042
7
20

answered May 08 '19 at 06:18

hruday kumar reddy

129
1
1
13

i need with attribute false also – balaji m May 08 '19 at 06:40
by removing disabled, it will work, need with disable false attribute – balaji m May 08 '19 at 06:41
disabled={true} for disabled options and disabled={flase} for other options should work. – hruday kumar reddy May 08 '19 at 06:42
Medication Class C I am trying to keep like this showing error – balaji m May 08 '19 at 06:49
use this(medicationclassenable) directly inside disabled instead of ternary operator disabled={medicationclassenable} – hruday kumar reddy May 08 '19 at 06:51

HalfWebDev · Answer 2 · 2019-05-08T06:29:31.360

Working codesandbox example.

disabled doesn't needs boolean value to be set. Mention of it alone dictates option tag to be disabled. In react, if you want to have a conditional check, you can do something like

 <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>

Assuming counter is a state variable.

In your present case, just doing disabled will suffice.

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

Option tag disable property

2 Answers2