Jquery Disable Option in Dropdown Menu

Question

Guys, I used the following code to disable an option using jQuery ( jquery-1.4.2.min ). Disabling occurs in Firefox, but not in 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

I think I'm wrong, but maybe because the select option, not the option, can be disabled. Since firefox works fine and IE sucks, well, you can guess why :) you have this problem. Use css to remove the text of this option.

then in jquery do something like this.

 $('#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 :)

Answer 2

My choice is slightly different from the other answers.

The goal is not to hide the parameters, but simply make them turn off (in order to maintain a consistent interface).

My scenario:

I have several selections in the form, and when the user selects a parameter in one of the options, the rest choose, should disable this option and vice versa. The user cannot select the same option that is already selected. Usually we turned off the option, but for IE 7, which does not support it. The user also gets the opportunity to add new options.

Decision:

Load:

If the browser is IE7, then when filling in the selected and disabled options already selected on others, I select I add a custom attribute to the option ("data-ie7-disabled"), as well as changing the color of disabled options to '#cccccc' (which is the standard color for disabled options). This makes the user interface the same in browsers.

On Change:

I save the previous parameter in a local variable (this is kept in focus).

When a user tries to change a parameter

The user selects a complete new option that is not selected in any other drop-down list. Then I scroll through the other selections and change the color and add a custom attribute to this selected parameter with other selections.

When the user selects a parameter that is already selected (a parameter that is grayed out). I check if this parameter has this user attribute. If it has>, I simply return the previous option with the error message: "This option is already selected or BLAH BLAH."

When the user changes his existing option to a completely new option that is not selected in any other drop-down menu. I iterate over all the other selection options and delete the color on it, as well as the custom attribute.

Hope this helps.