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>

Community · Accepted Answer · 2020-06-20 09:12:55Z

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, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 1, 2012 at 3:37

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tats_innit Over a year ago

LIfe is good bruv! :) wasn't well bruv, and was busy travelling from work.

nasty Over a year ago

Thanks guys, but my drop down is a dependant drop down and it populates <option value="- Sold Out -">- Sold Out -</option> 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 Over a year ago

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 Over a year ago

i changed .chagne to .click and it worked. But on IE, the drop down dissapears once clicked, and have to click it again

Tats_innit · Accepted Answer · 2012-08-01 03:26:29Z

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 1, 2012 at 3:26

answered Aug 1, 2012 at 3:16

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

7 Comments

nasty Over a year ago

Thanks guys, but my drop down is a dependant drop down and it populates <option value="- Sold Out -">- Sold Out -</option> 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?

Tats_innit Over a year ago

Yo @UdaraUragoda can you flick this behaviour in jsfiddle? plz! :)

Tats_innit Over a year ago

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

nasty Over a year ago

If the second option value has "Sold Out" somewhere within the value, disable it?

Tats_innit Over a year ago

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

|

Bbb · Accepted Answer · 2018-07-24 16:24:12Z

3

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);
        }
    });
}

answered Jul 24, 2018 at 16:24

Bbb

72112 silver badges39 bronze badges

Comments

gaurang171 · Accepted Answer · 2012-08-01 10:15:27Z

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

pushkin · Accepted Answer · 2018-10-04 17:09:16Z

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 4, 2018 at 17:09

pushkin

10.4k16 gold badges64 silver badges111 bronze badges

answered Oct 4, 2018 at 16:45

t_m27

1431 silver badge17 bronze badges

Comments

Sunil Sahoo · Accepted Answer · 2020-06-07 06:46:38Z

0

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

md-select-wrapper disabled disabled

answered Jun 7, 2020 at 6:46

Sunil Sahoo

1

Collectives™ on Stack Overflow

Disable Drop Down Option using jQuery

6 Answers 6

According to edit

4 Comments

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

According to edit

4 Comments

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related