javascript 下拉列表中的 Jquery 禁用选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4944269/
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 option in dropdown
提问by Dead Programmer
Guys i have used the following code to disable an option using jQuery (jquery-1.4.2.min).The disable happens in Firefox , but not in IE.
伙计们，我使用以下代码禁用了使用 jQuery ( jquery-1.4.2.min)的选项。禁用发生在 Firefox 中，但不在 IE 中。
<SELECT NAME="SCOPE" id="SCOPE">
<OPTION VALUE="G"> Global
<OPTION VALUE="D"> Dynamic
</SELECT>
$("#SCOPE option[value='G']").attr("disabled","disabled");
$("#SCOPE option[value='D']").attr("selected", "selected");
采纳答案by Val
I think i might be wrong but it could be because the select rather than option can be disabled. Since firefox is great and IE sucks, well you can guess why :) you having that problem. Use css to grey out the text of that option.
我想我可能是错的，但这可能是因为可以禁用选择而不是选项。由于 Firefox 很棒而 IE 很烂，所以您可以猜到原因:) 您遇到了这个问题。使用 css 使该选项的文本变灰。
then on jquery do something like this.
然后在 jquery 上做这样的事情。
$('#SCOPE').change(function(){
if($('#SCOPE option[value="'+$(this).val()+'"]').attr('disabled') == 'disabled'){
alert('Its disabled you cannot select this option');
}
});
BTW. double check the code as I have not tested this :)
顺便提一句。仔细检查代码，因为我还没有测试过:)
回答by Venkata Tata
My take is bit different to other answers.
我的看法与其他答案略有不同。
The aim is not to hide the options but just make them disable(to keep the UI consistent).
目的不是隐藏选项，而只是使它们禁用（以保持 UI 一致）。
My Scenario :
我的场景：
I have multiple selects in a form and when an user selects an option in one of the selects the other selects should disable this option and vice versa. User is restricted from selecting the same option which is already selected. We normally disable the option but for IE 7 which does not support it. User also gets an option to add new selects.
我在一个表单中有多个选择，当用户在其中一个选择中选择一个选项时，其他选择应该禁用此选项，反之亦然。用户被限制选择已选择的相同选项。我们通常禁用该选项，但对于不支持它的 IE 7。用户还可以选择添加新的选择。
Solution :
解决方案 ：
On load :
负载 ：
If the browser is IE7 then while populating the the selects and disabling the already selected options on other selects I am adding a custom attribute to the option("data-ie7-disabled") and also changing the color of the disabled options to '#cccccc'(which is the standard color for disabled options). This makes the UI look same across browsers.
如果浏览器是 IE7，那么在填充选择并禁用其他选择上已选择的选项时，我将自定义属性添加到选项（“data-ie7-disabled”），并将禁用选项的颜色更改为 '# cccccc'（这是禁用选项的标准颜色）。这使得 UI 在浏览器中看起来相同。
On Change :
更改时：
I save the previous option in a local variable(this is saved on focus).
我将上一个选项保存在局部变量中（这是保存在焦点上）。
When a user tries to change an option
当用户尝试更改选项时
User selects a complete new option which is not selected in any other dropdown. Then I loop through other selects and change the color and add custom attribute to this selected option on other selects.
用户选择一个完整的新选项，该选项未在任何其他下拉列表中选择。然后我遍历其他选择并更改颜色并将自定义属性添加到其他选择上的此选定选项。
When user selects an option that is already selected(The option which has grayed out color). I check if the option has this custom attribute on it first. If it has then > I simply revert the option to the previous one with an error message saying "This option is already selected or BLAH BLAH".
当用户选择一个已经被选中的选项时（颜色变灰的选项）。我首先检查该选项是否具有此自定义属性。如果它有那么 > 我只是将选项还原为上一个选项，并显示一条错误消息，提示“此选项已被选中或 BLAH BLAH”。
When user changes his existing option to a brand new option which is not selected in any other dropdown's. I again loop through all the other select options and remove the color on it and also the custom attribute.
当用户将其现有选项更改为未在任何其他下拉列表中选择的全新选项时。我再次遍历所有其他选择选项并删除其上的颜色以及自定义属性。
Hope this helps.
希望这可以帮助。
