Dojo disable all input fields in div container

Question

Hi Folks.

is there any way to disable all input fields in an div container with dojo ?

something like :

dijit.byId('main').disable -> Input ?

Answer 1

Sure there is. Open up this form test page for example, launch FireBug and execute in the console:

var container = dojo.query('div')[13];
console.log(container);
dojo.query('input', container).forEach(
  function(inputElem){
    console.log(inputElem);
    inputElem.disabled = 'disabled';
  }
)

Notes:

• On that test page form elements are actually dijit form widgets, but in this sample I'm treating them as if they were normal input tags
• The second dojo.query selects all input elements within the container element. If the container had some unique id, you could simplify the sample by having only one dojo.query: dojo.query('#containerId input').forEach( ...
• forEach loops through all found input elements and applies the given function on them.

Update: There's also a shortcut for setting an attribute value using NodeList's attr function instead of forEach. attr takes first the attribute name and then the value or an object with name/value pairs:

var container = dojo.query('div')[13];
dojo.query('input', container).attr('disabled', 'disabled');

Answer 2

Something else to keep in mind is the difference between A Dijit and a regular DomNode. If you want all Dijit's within a DomNode, you can convert them from Nodes -> Dijit refs with query no problem:

// find all widget-dom-nodes in a div, convert them to dijit reference:
var widgets = dojo.query("[widgetId]", someDiv).map(dijit.byNode);
// now iterate over that array making each disabled in dijit-land:
dojo.forEach(widgets, function(w){ w.attr("disabled", "disabled"); }

It really just depends on if your inputs are regular Dom input tags or have been converted into the rich Dijit templates (which all do have a regular input within them, just controlled by the widget reference instead)

Answer 3

That's how I do it:

dojo.query("input, button, textarea, select", container).attr("disabled", true);

This one-liner disables all form elements in the given container.