In this form, a user can ether select the checkboxes or the radio buttons, but not both. If the user selects a checkbox and afterwards selects a radio button, I then grey out the checkbox.
Should I also clear the checkbox check value?
I wasn't sure if I should leave the checkbox value in case the deselect the radio button.
If you're going to have the user select multiple, then stick with checkboxes. Radio buttions are meant for single choices and not multiple.
To solve your dilemma take a look at this: JSFiddle
We only show the selection if the user has a foo.
Agreed, you'd have better usability with two sets of radio buttons. Additionally, to preserve the ability for multi-select you'd need each radio input element within the first set to have the same name attribute value, and the other set to have unique values for each input name.
Checkout this JSFiddle for an example to how you could go about your problem using the power of javascript (uses jQuery, but can be done in pure js as well).
You've encountered a usability issue because a user can not "uncheck" a radio button if they decide they want to use the checkboxes instead.
You'd be better off using radio buttons (at a master level) to let the user choose between "options for set 1" vs. "options for set 2"
Regardless of this, if you are going to show radio buttons or checkboxes in a disabled state... they should still show their selected state.
e.g. If a user is using the "free package" of a service... and this means they can't change the number of say "websites" that they can create (say it locks them to exactly 1, and the options are [1,5,10, unlimited]) - if you show the options as disabled, it is still important to show them what is set.
