HTML form enable one list of options or another
Possible problem of the current solution

If you check one of the checkboxes, it gets activated and the select-element becomes enabled. If you click the same checkbox again, you only uncheck it, but the select-element stays enabled. I'd say there are two possibilities here:


disable the select-element as well
don't let the user uncheck the input-element


In the following examples I went with the first option.
As requested in the comments, I've updated the review to work for the second option.

Reduce the number of DOM queries and cache selectors

You didn't say how many of those groups are present or how often a user is going to make this decision. But you do a lot of the same DOM queries in your event handler over and over again.

At first let's store the "group-selector" in a string, to make it re-usebale. Then select all groups:

const selector = '[data-form-group]';
const groups = $(selector);


You can stick to classes if you like. I tend to use data-*-attributes to couple JavaScript.



As we also often need the input- and the select-element in each group, let's store them as well:

groups.each(function() {
    const group = $(this);
    group.data('checkbox', group.find('input'));
    group.data('select', group.find('select'));
});


Now we can access the form elements anytime, without re-querying the DOM.

The actual event handler

Attach the event handler to each input-element, the checkboxes radio-buttons. Then test, whether the current group is "enabled", i.e. the input-element is checked:

If it is checked already


do nothing and simply return


If it is not checked


enable the select-element
run through all other groups and disable them


The final code could look like this:

const selector = '[data-form-group]';
const groups = $(selector);

groups.each(function() {
  const group = $(this);
  group.data('toggle', group.find('input'));
  group.data('options', group.find('select'));

  group.data('toggle').on('change', function() {
    const selectedGroup = $(this).closest(selector);

    if (!selectedGroup.data('toggle').is(':checked')) {
      return;
    }

    selectedGroup.data('options').prop('disabled', false);

    groups.each(function() {
      const current = $(this);

      if (selectedGroup[0] === current[0]) {
        return;
      }

      current.data('toggle').prop('checked', false);
      current.data('options').prop('disabled', true);
    });
  });
});


Try it yourself