使用jQuery禁用下拉选项

Question

我需要在一组动态下拉菜单中禁用值为“- Sold Out -”的选项。如何使用jQuery轻松实现此功能？以下是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>

- nasty

Answer 1

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

演示

根据编辑

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

- thecodeparadox

---

生活很美好，兄弟！:) 兄弟不太好，一直在忙于工作旅行。 - Tats_innit

谢谢大家，但是我的下拉菜单是一个依赖下拉菜单，当我选择前一个下拉菜单时，它会填充<option value="- Sold Out -">- Sold Out -</option>。因此，它不会被提供的脚本禁用。有什么解决办法吗？如何使它在更改下拉菜单时运行jquery？希望我表达清楚。 - nasty

抱歉，它也没有起作用。对不起。你能看一下这个链接吗www.fitfixtraining.com.au/formtest/form.php？这是一个类似于我拥有的表格，在这种情况下，我想禁用Alberta？ - nasty

我把“.change”改成了“.click”，然后它就可以工作了。但在IE上，一旦点击下拉菜单，它就会消失，必须再次点击才行。 - nasty

Answer 2

工作演示 http://jsfiddle.net/BYkVW/ 或者 http://jsfiddle.net/BYkVW/1/

希望能够满足您的需求：）

代码

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

或者

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

工作镜像

- Tats_innit

---

谢谢大家，但是我的下拉菜单是一个依赖下拉菜单，当我选择前一个下拉菜单时，它会填充<option value="- Sold Out -">- Sold Out -</option>。因此，它不会使用您提供的脚本禁用。有什么解决办法吗？如何使它在更改下拉菜单后运行jquery？ - nasty

嘿，@UdaraUragoda，你能在jsfiddle中解决这个行为问题吗？拜托了！:) - Tats_innit

@UdaraUragoda，很酷，所以你的第二个下拉菜单“禁用”取决于第一个下拉列表，对吗？那么您希望哪些选项被禁用呢？让我知道，我会给您提供解决方案。:)或者帮助您解决问题。 - Tats_innit

如果第二个选项的值中包含“已售罄”字样，将其禁用。 - nasty

@UdaraUragoda 嘿兄弟 - 我真的很难理解你想说什么 - 我建议你考虑一下情况并传达过来 - 也就是说，如果在多个地方存在选项“售罄”，则希望在选择下拉菜单中禁用它？ :) 不要担心，只要我理解了，我很乐意帮助你！ - Tats_innit

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

- Bbb

Answer 4

如果有人想按文本而非值来禁用下拉列表，以下是我的做法：

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

- t_m27

Answer 5

这里我已经为上述问题提供了解决方案。以下是演示链接：

演示：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);
    });
});

演示：http://codebins.com/bin/4ldqp92

- gaurang171

Answer 6

只需将 class disabled 添加到 md-select-wrapper 上 $("#selectFromMainId").addClass("disabled");

md-select-wrapper 已禁用

- Sunil Sahoo