jQuery – 禁用选定的选项

需要使用jQuery在select框中禁用已经select的选项。 我希望它像asmselect灰色。

在这里testing我的例子。

//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>​ 

更新 :这是完成的解决scheme 。 感谢Patrick和Simen。

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

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

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

编辑:

如果你不想重新启用以前的那个,只要删除这一行的这一部分:

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

编辑:

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

点击删除后重新启用,将其添加到您的点击处理程序。

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

这将分别在select/删除选项时禁用/启用选项。

 $("#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/

这似乎工作:

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

请试试这个,

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