jQuery disable SELECT options based on Radio selected (Need support for all browsers)

Question

Okay having a bit of trouble here, wanted to disable some of the options when selecting a radio. When ABC is selected disable the 1,2 & 3 options, etc...

$("input:radio[@name='abc123']").click(function() {
   if($(this).val() == 'abc') {

      // Disable 
      $("'theOptions' option[value='1']").attr("disabled","disabled");
      $("'theOptions' option[value='2']").attr("disabled","disabled");
      $("'theOptions' option[value='3']").attr("disabled","disabled");

   } else {
      // Disbale abc's
   }    
});

ABC: <input type="radio" name="abc123" id="abc"/>
123: <input type="radio" name="abc123" id="123"/>

<select id="theOptions">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

Not working any ideas?

UPDATE:

Ok I got the enable/disable working but a new problem has arose. The disabled options for my select box only work in FF and IE8. I have tested IE6 and the disabled is not working. I have tried to use the hide() and show() with no luck either. basically I need to hide/disable/remove the options (for all browsers) and be able to add them back if the other radio option is selected and vice versa.

CONCLUSION:

Thanks for all the solutions, most of all of them answered my original question. Much PROPS to all :)

A solution to this problem: stackoverflow.com/questions/7553880/… — standup75

Paolo Bergantino Paolo Bergantino · Accepted Answer · 2009-05-18T15:33:32

The proper way to achieve the functionality you want is just to remove the options. As you discovered the hard way, disabling individual options is not supported particularly well across browsers. I just woke up and feel like programming something so I whipped up a small plugin to easily filter a select based on a radio's selected ID attribute. Although the rest of the solutions will get the job done, if you are planning on doing this throughout your app this should help. If not, then I guess it's for anyone else that stumbles upon this. Here is the plugin code you could stash away somewhere:

jQuery.fn.filterOn = function(radio, values) {
    return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('option').each(function() {
            options.push({value: $(this).val(), text: $(this).text()});
        });
        $(select).data('options', options);
        $(radio).click(function() {
            var options = $(select).empty().data('options');
            var haystack = values[$(this).attr('id')];
            $.each(options, function(i) {
                var option = options[i];
                if($.inArray(option.value, haystack) !== -1) {
                    $(select).append(
                    $('<option>').text(option.text).val(option.value)
                    );
                }
            });
        });            
    });
};

And here is how to use it:

$(function() {
    $('#theOptions').filterOn('input:radio[name=abc123]', {
        'abc': ['a','b','c'],
        '123': ['1','2','3']        
    });
});

The first argument is a selector for the radio group, the second a dictionary where the keys are the radio ID to match, and the value is an array of what select option values should remain. There's a lot of things that could be done to abstract this further, let me know if you are interested and I could certainly do that.

Here is a demo of it in action.

EDIT: Also, forgot to add, according to the jQuery documentation:

In jQuery 1.3 [@attr] style selectors were removed (they were previously deprecated in jQuery 1.2). Simply remove the '@' symbol from your selectors in order to make them work again.

jQuery disable SELECT options based on Radio selected (Need support for all browsers)

8 Answers