Jquery 禁用下拉列表中的选项

Question

伙计们，我使用下面的代码来禁用使用 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");

Answer 1

我想我可能是错的，但这可能是因为可以禁用选择而不是选项。由于 Firefox 很棒而 IE 很糟糕，你可以猜到为什么你会遇到这个问题。使用 css 使该选项的文本变灰。

然后在 jquery 上做这样的事情。

$('#SCOPE').change(function(){
  if($('#SCOPE option[value="'+$(this).val()+'"]').attr('disabled') == 'disabled'){
    alert('Its disabled you cannot select this option');
  }
});

顺便提一句。仔细检查代码，因为我还没有测试过这个:)

Answer 2

我的看法与其他答案有点不同。

目的不是隐藏选项，而只是禁用它们（以保持 UI 一致）。

我的场景：

我在表单中有多个选择，当用户在其中一个选择中选择一个选项时，其他选择应该禁用此选项，反之亦然。用户被限制选择与已选择的选项相同的选项。我们通常禁用该选项，但 IE 7 不支持它。用户还可以选择添加新选择。

解决方案：

加载时：

如果浏览器是 IE7，则在填充选择并禁用其他选择上已选择的选项时，我向选项添加自定义属性（“data-ie7-disabled”）并更改颜色禁用选项为“#cccccc”（这是禁用选项的标准颜色）。这使得 UI 在各个浏览器中看起来都相同。

更改时：

我将上一个选项保存在局部变量中（这保存在焦点上）。

当用户尝试更改选项时，

用户选择一个全新的选项，该选项未在任何其他下拉列表中选择。然后，我循环遍历其他选择并更改颜色，并将自定义属性添加到其他选择上的此选定选项。

当用户选择一个已经选择的选项时（颜色变灰的选项）。我首先检查该选项是否具有此自定义属性。如果有则>我只是将该选项恢复到前一个选项，并显示一条错误消息“该选项已被选中或BLAH BLAH”。

当用户将其现有选项更改为未在任何其他下拉列表中选择的全新选项时。我再次循环遍历所有其他选择选项并删除其颜色以及自定义属性。

希望这有帮助。