Disable Drop Down Option using jQuery

问题

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>

回答1:

$("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);
});

回答2:

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

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

working image

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

回答4:

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

回答5:

$("#ddlList option[value='jquery']").attr("disabled","disabled");

回答6:

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

来源：https://stackoverflow.com/questions/11752097/disable-drop-down-option-using-jquery

标签

jquery

html

web-deployment