DC.js Disable SelectMenu

I have two selectMenus, I want the selectMenu 2 to be disabled until the user interacts with selectMenu 1.

How to disable a dc.js - selectMenu in this scenario?

After the first render, I would disable the second selectMenu using the disabled attribute. You have to wait until it's rendered because before then, the select element doesn't exist.

Then, on the filtered event, I would re-enable it.

Here's a demo with three selectMenus.

Relevant code:

  dc.renderAll();

  select2.select('select').attr('disabled', 'disabled');
  select3.select('select').attr('disabled', 'disabled');

  select1.on('filtered.enable', function() {
    select2.select('select').attr('disabled', null);
  });
  select2.on('filtered.enable', function() {
    select3.select('select').attr('disabled', null);
  });

(Is that enough different uses of the word "select"?)