jQuery - 禁用选定的选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2867362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - disable selected options
提问by Jeffrey
Need to disable already selected options in select box using jQuery. I'd like it to grey out like asmselect.
需要使用 jQuery 在选择框中禁用已选择的选项。我希望它像asmselect一样变灰。
Test my example 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>?
UPDATED: Here's the finished solution. Thanks to Patrick and Simen.
更新：这是完成的解决方案。感谢帕特里克和西蒙。
回答by user113716
Add this line to your changeevent handler
将此行添加到您的change事件处理程序
$("#theSelect option:selected").attr('disabled','disabled')
.siblings().removeAttr('disabled');
This will disable the selected option, and enable any previously disabled options.
这将禁用选定的选项，并启用任何以前禁用的选项。
EDIT:
编辑：
If you did not want to re-enable the previous ones, just remove this part of the line:
如果您不想重新启用以前的功能，只需删除该行的这一部分：
.siblings().removeAttr('disabled');
EDIT:
编辑：
To re-enable when you click remove, add this to your click handler.
要在单击删除时重新启用，请将其添加到单击处理程序中。
$("#theSelect option[value=" + value + "]").removeAttr('disabled');
回答by Siva Anand
pls try this,
请试试这个，
$('#select_id option[value="'+value+'"]').attr("disabled", true);
回答by Simen Echholt
This will disable/enable the options when you select/remove them, respectively.
这将分别在您选择/删除选项时禁用/启用这些选项。
$("#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');
});
回答by jeanreis
This seems to work:
这似乎有效：
$("#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');
});
