“disabling” (gray text, no mouse/keyboard) jquery UI widgets and regular HTML inside a container

It seems that the widget factory, used as the basis for all jQuery UI widgets, at least tries to bake in some disabled support that you can use like so:

$(dialogEl).dialog("disable");

The base functionality adds the ui-state-disabled class and the aria-disabled attribute, and doesn't fire any handlers.

It's possible some widgets don't override this correctly for their particular cases; you'd need to test. But it seems likely this will work in most cases.

Alternatives:

You might get some mileage out of applying the ui-state-disabled class, but it will likely only work for styling, and not prevent any response.

One way of preventing responses in some browsers is pointer-events: none, but that's not cross browser and kind of a hack (for example, not sure if it has the keyboard behavior you want).

The best way is to put an invisible overlay on top of everything that has onclick and onmouseover events that just return false. It can be somewhat awkward, but it's certainly the most effective.