jquery - Jquery在请求时不禁用下拉项

Question

在我选择它并单击一个按钮后，我试图禁用它。我正在使用 Jquery，代码如下所示：

$("body").on("click", "#AddProduct", function () {
            var id = $("#ProductDrop").val();
            var lookups = JSON.stringify(@Html.Raw(Json.Encode(Model.Point.Properties["Lookups"])));
            var data = JSON.stringify({ productId: id, lookupData: lookups });
            $.ajax({
                contentType: 'application/jsonrequest; charset=utf-8',
                dataType: 'html',
                type: 'POST',
                cache: false,
                url: '/Edit/AddRow',
                data: data,
                success: function (data) {
                    $("#ProductDrop option[value = \""+id+"\"]").prop("disabled", true)
                    $("#tableBody").append(data);
                },
                failure: function () {
                    alert("failure");
                }
            });
        });

在 ajax 请求成功后，我想禁用下拉项。

当我运行此代码时，标记如下所示：

<div class="ui dropdown selection" tabindex="0">
    <select id="ProductDrop" name="Products">
        <option disabled="disabled" value="1">AWV</option>
        <option disabled="disabled" value="2">AWS</option>
        <option value="3" disabled="">AGZ</option>
        <option value="4">AMZ</option>
        <option value="5">WWV</option>
        <option value="6">WWS</option>
        <option value="7">WTS</option>
        <option value="8">WME-B Gen2</option>
        <option value="9">WTC</option>
        <option value="10">WCT</option>
        <option value="11">WMT</option>
        <option value="14">WCT-Gen2</option>
    </select>
    <i class="dropdown icon clear"></i>
    <div class="text">AGZ</div>
    <div class="menu" tabindex="-1">
        <div class="disabled item" data-value="1">AWV</div>
        <div class="disabled item" data-value="2">AWS</div>
        <div class="item active selected" data-value="3">AGZ</div>
        <div class="item" data-value="4">AMZ</div>
        <div class="item" data-value="5">WWV</div>
        <div class="item" data-value="6">WWS</div>
        <div class="item" data-value="7">WTS</div>
        <div class="item" data-value="8">WME-B Gen2</div>
        <div class="item" data-value="9">WTC</div>
        <div class="item" data-value="10">WCT</div>
        <div class="item" data-value="11">WMT</div>
        <div class="item" data-value="14">WCT-Gen2</div>
    </div>
</div>

该项目在选择中被禁用但不在菜单中（并且仍然可以在网页中选择）。我创建下拉列表的剃刀代码是这样的：

@Html.DropDownList("Products",(List<SelectListItem>)Model.Point.Properties["PossibleProducts"], new { @class="ui dropdown", @id = "ProductDrop"})

我不太确定为什么这段代码不起作用。我认为这与菜单标记中未禁用的项目有关，但我不知道如何禁用它。我创建下拉菜单的方式有问题吗？

标签： jqueryhtmlasp.net-mvcrazor