Question

So I have a drop down list and a several check boxes. The drop down list pertains to a primary choice where the user can only select one option. The check boxes pertain to a secondary choice where the user can select as many as they like but the one that they selected from the drop down list will not appear as one of the options. Here’s my code so far: fiddle

So for example, if the user selects option 1 from the drop down list, then only option2-8 should be available as checkboxes. I want to essentially hide option1 and show the rest. I don’t really know what this is called so I didn’t know what to search or where to look. I was looking to see if there was somesort of jquery plugin for this but how should I go about doing this? Thanks

Answer 1

Michael, try this :

javascript

$(function(){
    $('#primary').on('change', function() {
        var $sec = $('.secondary'); 
        var idx = this.selectedIndex;
        $sec.find('input').attr('disabled', false).eq(idx).attr('disabled', true);
        $sec.find('label').removeClass('disabled').eq(idx).addClass('disabled');
    }).trigger('change');
});

CSS :

.disabled {
    color: gray;
}

Demo

I have departed from the brief slightly by disabling rather than hiding the unwanted checkbox. This is maybe less confusing for the user. If not, then it’s quite easy to modify the code to hide/show :

$('#primary').on('change', function() {
    $('.secondary').find('label').show().eq(this.selectedIndex).hide();
}).trigger('change');

Demo