Disable Drop Down Option using jQuery

Question

I need to disable options with value "- Sold Out -" in a list of dynamic drop down menus. How can I do this easily with jQuery? Below is the HTML

<select id="field_0_1" class="text_select" name="field_0_1" onChange="">
<option value="">- Preferred Time -</option>
<option value="- Sold Out -">- Sold Out -</option>
<option value="2:30 - 4:00pm">2:30 - 4:00pm</option>
</select>
<select id="field_0_2" class="text_select" name="field_0_2" onChange="">
<option value="">- Preferred Time -</option>
<option value="- Sold Out -">- Sold Out -</option>
<option value="2:30 - 4:00pm">2:30 - 4:00pm</option>
</select>
<select id="field_0_3" class="text_select" name="field_0_3" onChange="">
<option value="">- Preferred Time -</option>
<option value="- Sold Out -">- Sold Out -</option>
<option value="2:30 - 4:00pm">2:30 - 4:00pm</option>
</select>

score 49 · Accepted Answer · edited Jun 20 '20 at 09:12

49

$("select option[value*='Sold Out']").prop('disabled',true);

Demo

According to edit

$('#previous_select').on('change', function() {
   // after creating the option
   // try following
   $("select option[value*='Sold Out']").prop('disabled',true);
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 01 '12 at 03:37

thecodeparadox

86,271
21
138
164

LIfe is good bruv! `:)` wasn't well bruv, and was busy travelling from work. – Tats_innit Aug 01 '12 at 03:45
Thanks guys, but my drop down is a dependant drop down and it populates when I select the previous drop down. So it doesnt get disabled with the script you provided. Whats the solution for that? How can I make it run the jquery once they change the drop down? Hope I make sense – nasty Aug 01 '12 at 04:13
Sorry, it didnt work either. Sorry. can you have a look at this link www.fitfixtraining.com.au/formtest/form.php Its a similar form as I have, in this case, I want to disable Alberta? – nasty Aug 01 '12 at 04:59
i changed .chagne to .click and it worked. But on IE, the drop down dissapears once clicked, and have to click it again – nasty Aug 01 '12 at 05:37

Tats_innit · Answer 2 · 2012-08-01T03:26:29.943

9

Working demo http://jsfiddle.net/BYkVW/ or http://jsfiddle.net/BYkVW/1/

Hope it helps the needs :)

code

$("#field_0_1 option[value='- Sold Out -']").attr('disabled','disabled');

or

$("#field_0_1 option[value='- Sold Out -']").prop('disabled','disabled');

working image

enter image description here

edited Aug 01 '12 at 03:26

answered Aug 01 '12 at 03:16

Tats_innit

33,991
10
71
77

Thanks guys, but my drop down is a dependant drop down and it populates when I select the previous drop down. So it doesnt get disabled with the script you provided. Whats the solution for that? How can I make it run the jquery once they change the drop down? – nasty Aug 01 '12 at 04:04
Yo @UdaraUragoda can you flick this behaviour in jsfiddle? plz! `:)` – Tats_innit Aug 01 '12 at 04:14
@UdaraUragoda cool so you second drop down `disable` is depended on the 1st drop down list right? so what is the condition you wnat option to be disabled for? Lemme know and I will flick you the solution. `:)` or help you out. – Tats_innit Aug 01 '12 at 04:38
If the second option value has "Sold Out" somewhere within the value, disable it? – nasty Aug 01 '12 at 04:40
@UdaraUragoda yo brother - I am really finding it hard to understand what are your trying to say - I reckon think about the scenario and flick it across - i.e. you want option `"Sold Out"` disabled everywhere in the select drop down if it exist in multiple place? `:)` dont worry Given I understand I am happy to help you out! – Tats_innit Aug 01 '12 at 04:46
Sorry. did you have a look at this link www.fitfixtraining.com.au/formtest/form.php Its a similar form as I have, in this case, I want to disable Alberta? – nasty Aug 01 '12 at 04:51
i changed .chagne to .click and it worked. But on IE, the drop down dissapears once clicked, and have to click it again – nasty Aug 01 '12 at 05:37

score 3 · Answer 3 · answered Jul 24 '18 at 16:24

function lockDownDropDownList(ddlName) {
    ddlName = "#" + ddlName;
    var chosenValue = $(ddlName).val();

    var downDownListItems = $(ddlName).children('option').map(function (i, e) {
        return e.value || e.innerText;
    }).get();

    downDownListItems.forEach(function (item) {
        if (item != chosenValue)
        {
            $("select option[value*='" + item + "']").prop('disabled', true);
        }
    });
}

score 1 · Answer 4 · answered Aug 01 '12 at 10:15

Here i have done solution for above query. demo link as below:

Demo: http://codebins.com/bin/4ldqp92

HTML:

 <select id="field_0_1" class="text_select" name="field_0_1" onChange="">
  <option value="">
    - Preferred Time -
  </option>
  <option value="- Sold Out -">
    - Sold Out -
  </option>
  <option value="2:30 - 4:00pm">
    2:30 - 4:00pm
  </option>
</select>
<select id="field_0_2" class="text_select" name="field_0_2" onChange="">
  <option value="">
    - Preferred Time -
  </option>
  <option value="- Sold Out -">
    - Sold Out -
  </option>
  <option value="2:30 - 4:00pm">
    2:30 - 4:00pm
  </option>
</select>
<select id="field_0_3" class="text_select" name="field_0_3" onChange="">
  <option value="">
    - Preferred Time -
  </option>
  <option value="- Sold Out -">
    - Sold Out -
  </option>
  <option value="2:30 - 4:00pm">
    2:30 - 4:00pm
  </option>
</select>

JQuery:

$(function() {
    $("select").click(function() {
        $(this).find("option[value*='Sold Out']").prop("disabled", true);
    });
});

Demo: http://codebins.com/bin/4ldqp92

score 1 · Answer 5 · edited Oct 04 '18 at 17:09

1

In case anyone wants to be able to disable a drop down list by text instead of value, here's what I did:

$("#DDL option").filter(function () {
    return $(this).text() === "Text 1" ||
           $(this).text() === "Text 2" ||
           $(this).text() === "Text 3";
}).prop("disabled", true);

edited Oct 04 '18 at 17:09

pushkin

9,575
15
51
95

answered Oct 04 '18 at 16:45

t_m27

103
16

score 0 · Answer 6 · answered Jun 07 '20 at 06:46

0

Just use add class disabled to md-select-wrapper $("#selectFromMainId").addClass("disabled");

md-select-wrapper disabled disabled

answered Jun 07 '20 at 06:46

Sunil Sahoo

1

Disable Drop Down Option using jQuery

6 Answers6

According to edit

Linked