Clever Geek Handbook

Dojo disable all input fields in container div

Is it possible to disable all input fields in a div container using dojo?

Something like:

dijit.byId('main').disable -> Input
+2


source to share


4 answers


Of course have. Open this test page of the form , for example run 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 this form element, the test page actually sees the form widgets, but in this example I treat them as if they were normal input tags
  • The second dojo.query selects all input elements in the element container

    . If the container had a unique ID, you can simplify fetching by having only one dojo.query:dojo.query('#containerId input').forEach( ...

  • forEach goes through all the input elements it finds and applies the specified function to them.

Update: There is also a shortcut for setting the attribute value using the NodeList function attr

instead forEach

. attr takes the name of the attribute first and then the value or object with name / value pairs:

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


source


What am I doing:

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


This one-liner disables all form elements in this container.

+10


source


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

// 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 depends if your inputs are regular Dom input tags or have been converted to rich Dijit templates (all of which have a normal input to them, just driven by a link on the widget)

+6


source


I would do it like this:

var widgets;

require(["dijit/registry", "dojo/dom"], function(registry, dom){
    widgets = registry.findWidgets(dom.byId(domId));
});

require(["dojo/_base/array"], function(array){
    array.forEach(widgets, function(widget, index) {
        widget.set("disabled", true);
    });
});

The findWidgets method is needed to get all widgets under a specific DOM.

+1


source






More articles:


All Articles