jQuery - 禁用选定的选项答案

【问题标题】：jQuery - disable selected optionsjQuery - 禁用选定的选项
【发布时间】：2016-12-07 01:10:46
【问题描述】：

需要使用 jQuery 禁用选择框中已选择的选项。我希望它像 asmselect 一样变灰。

测试我的例子here。

//JS
$("#theSelect").change(function(){          
  var value = $("#theSelect option:selected").val();
  var theDiv = $(".is" + value);

  theDiv.slideDown().removeClass("hidden");
});


$("div a.remove").click(function () {     
  $(this).parent().slideUp(function() { $(this).addClass("hidden"); }); 
});

//HTML
<body>
<div class="selectContainer">
    <select id="theSelect">
        <option value="">- Select -</option>
        <option value="Patient">Patient</option>
        <option value="Physician">Physician</option>
        <option value="Nurse">Nurse</option>
    </select>
</div>
<div class="hidden isPatient">Patient <a href="#" class="remove" rel="Patient">remove</a></div>
<div class="hidden isPhysician">Physician <a href="#" class="remove" rel="Patient">remove</a></div>
<div class="hidden isNurse">Nurse <a href="#" class="remove" rel="Patient">remove</a></div>
</body>

更新：这是finished solution。感谢 Patrick 和 Simen。

【问题讨论】：

标签： jquery html-select

【解决方案1】：

将此行添加到您的 change 事件处理程序

    $("#theSelect option:selected").attr('disabled','disabled')
        .siblings().removeAttr('disabled');

这将禁用选定的选项，并启用任何以前禁用的选项。

编辑：

如果您不想重新启用之前的那些，只需删除该行的这一部分：

        .siblings().removeAttr('disabled');

编辑：

http://jsfiddle.net/pd5Nk/1/

要在您点击删除时重新启用，请将其添加到您的点击处理程序中。

$("#theSelect option[value=" + value + "]").removeAttr('disabled');

【讨论】：

更新了我的答案以在您单击“删除”时重新启用正确的选项。
这也很好用，谢谢。像 Simen 的例子那样使用 find 和 data 有什么缺点吗？
比我的答案更少的代码和更少的内存消耗（不使用 data()）:) 只要记住更新原始代码中链接的rel-tags，因为它们都是指向患者
@Jeffrey - 我也喜欢 Simen 的解决方案。正如我在他下面的评论中指出的那样，我唯一不同的是，在调用 change 之前，将 option 元素与它们的 a 元素在一个循环中关联起来。如果他这样做，他的版本将保存元素查找。我的版本节省了一些内存开销。两者都行。
@user113716 请使用.prop('disabled', true);，因为在这种情况下更推荐使用。

【解决方案2】：

请试试这个，

$('#select_id option[value="'+value+'"]').attr("disabled", true);

【讨论】：

【解决方案3】：

这将分别在您选择/删除选项时禁用/启用它们。

$("#theSelect").change(function(){          
    var value = $(this).val();
    if (value === '') return;
    var theDiv = $(".is" + value);

    var option = $("option[value='" + value + "']", this);
    option.attr("disabled","disabled");

    theDiv.slideDown().removeClass("hidden");
    theDiv.find('a').data("option",option);
});


$("div a.remove").click(function () {     
    $(this).parent().slideUp(function() { $(this).addClass("hidden"); });
    $(this).data("option").removeAttr('disabled');
});

演示：http://jsfiddle.net/AaXkd/

【讨论】：

这很好，虽然我需要再添加一个。它还可以停留在 -select- 标题上而不显示选择的最新选项吗？
在change函数末尾添加$(this).val('');。
+1 我喜欢您使用data() 将option 与适当元素相关联的方法。鉴于这种方法，最好在 change 事件处理程序之外的循环中进行关联，这样您就可以多余地分配数据。不过看起来不错。

【解决方案4】：

这似乎有效：

$("#theSelect").change(function(){          
    var value = $("#theSelect option:selected").val();
    var theDiv = $(".is" + value);

    theDiv.slideDown().removeClass("hidden");
    //Add this...
    $("#theSelect option:selected").attr('disabled', 'disabled');
});


$("div a.remove").click(function () {     
    $(this).parent().slideUp(function() { $(this).addClass("hidden"); });
    //...and this.
    $("#theSelect option:disabled").removeAttr('disabled');
});

【讨论】：

与 patrick 的第一次尝试相同的问题。删除点击上的启用正在更新所有禁用的选项。