15

我需要在动态下拉菜单列表中禁用值为“- 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>
4

7 回答 7

44 
$("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);
});
于 2012-08-01T03:37:13.927 回答
8

工作演示 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');

工作形象

在此处输入图像描述

于 2012-08-01T03:16:36.517 回答
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);
        }
    });
}
于 2018-07-24T16:24:12.430 回答
1

在这里，我已经完成了上述查询的解决方案。演示链接如下：

演示： 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>

查询：

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

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

于 2012-08-01T10:15:27.747 回答
1 
$("#ddlList option[value='jquery']").attr("disabled","disabled");
于 2018-02-15T06:56:52.323 回答
1

如果有人希望能够通过文本而不是值禁用下拉列表，这就是我所做的：

$("#DDL option").filter(function () {
    return $(this).text() === "Text 1" ||
           $(this).text() === "Text 2" ||
           $(this).text() === "Text 3";
}).prop("disabled", true);
于 2018-10-04T16:45:31.583 回答
0

只需使用禁用添加类到md-select-wrapper $("#selectFromMainId").addClass("disabled");

md-select-wrapper 禁用 禁用

于 2020-06-07T06:46:38.153 回答