Conditionnellement activer/désactiver des champs dans les AEM 6.1 (granit.l'interface utilisateur) TouchUI boîtes de dialogue

Après un peu de déconner j'ai eu ce travail en ajoutant class="cq-dialogue-case-enabledisable" à mon sling:resourceType="granit/ui/composants/fondation/forme/case à cocher" et class="cq-dialogue-case-enabledisable-cible" à la fronde:resourceType="granit/ui/composants/fondation/forme/textarea" que j'ai voulu désactiver dans mon cq:dialog.xml.

J'ai ensuite créé ma propre clientLib qui a des dépendances sur le granit.jquery et les catégories de cq.la création.la boîte de dialogue.

Mise à JOUR: il s'avère que les handicapés de la propriété ne peut pas être défini par programmation sur pathbrowser types de champ au plus haut niveau, de sorte que vous recherchés pour désactiver l'enfant les champs qui se trouvent à l'intérieur (js-corail-pathbrowser d'entrée et js-corail-pathbrowser-bouton) extrait de code ci-dessous mis à jour pour refléter cela.

JS:

  
/**
* Extension to the standard checkbox component. It enables/disables  other components based on the
* selection made in the checkbox.
*
* How to use:
*
* - add the class cq-dialog-checkbox-enabledisable to the checkbox element
* - add the class cq-dialog-checkbox-enabledisable-target to each target component that can be enabled/disabled
*/
(function(document, $) {
"use strict";
//when dialog gets injected
$(document).on("foundation-contentloaded", function(e) {
//if there is already an inital value make sure the according target element becomes visible
enableDisable($(".cq-dialog-checkbox-enabledisable", e.target));
});
$(document).on("change", ".cq-dialog-checkbox-enabledisable", function(e) {
enableDisable($(this));
});
function enableDisable(el){
el.each(function(i, element) {
if ($(element).attr("type") === "checkbox"){
if ($(element).prop('checked')){
$('.cq-dialog-checkbox-enabledisable-target').enable();
} else {
$('.cq-dialog-checkbox-enabledisable-target').disable();
}
}
})
}
//recurse all pathbrowser children and grandchildren etc
function iteratePathBrowserDescendants (node, enable) {
for (var i = 0; i < node.childNodes.length; i++) {
var child = node.childNodes[i];
if ((child.className.indexOf('js-coral-pathbrowser-input') > -1 ) || (child.className.indexOf('js-coral-pathbrowser-button') > -1 )) {
enablePathBrowser(child, enable);
} else {
iteratePathBrowserDescendants(child, enable);
}
}
}
function enablePathBrowser(node, enable) {
node.disabled = enable;
}
//iterate class cq-dialog-checkbox-enabledisable-target's and enable
$.prototype.enable = function () {
$.each(this, function (index, el) {
//special treatment for pathBrowser as it is made up of multiple fields and cannot be disabled at the top level
if (el.hasAttribute('data-init')) {
if (el.getAttribute('data-init') == 'pathbrowser'){
iteratePathBrowserDescendants(el, false);
};
} else {
el.disabled = false;
}
});
}
//iterate class cq-dialog-checkbox-enabledisable-target's and disable
$.prototype.disable = function () {
$.each(this, function (index, el) {
//special treatment for pathBrowser as it is made up of multiple fields and cannot be disabled at the top level
if (el.hasAttribute('data-init')) {
if (el.getAttribute('data-init') == 'pathbrowser'){
iteratePathBrowserDescendants(el, true);
};
} else {
el.disabled = true;
}
});
}
})(document,Granite.$);