Expand my Community achievements bar.

AEM 6.4 – Toggle dialog fields based on Checkbox selection

Avatar

Level 4

In AEM 6.3 (coral-2), we had the custom javascript code [clientlib] which use to work to toggle dialog fields based on the checkbox click. Now, we have upgraded to 6.4.3 and converted all dialogs to coral-3 And functionality stopped working now. I have got the reference of OOTB "List component" but that is for dropdown based toggle, I need checkbox based toggle. Any reference will be helpful.

2 Replies

Avatar

Community Advisor

could you please tell what sling:resourceType you are using for checkbox?

Avatar

Level 4

granite/ui/components/coral/foundation/form/checkbox

Just for your reference, I was using below client lib for toggle

(function (document, $) {

  "use strict";

  // listen for dialog injection

  $(document).on("foundation-contentloaded", function (e) {

    $(".showhide").each(function () {

      showHide($(this));

    });

  });

  // listen for toggle change

  $(document).on("change", ".showhide", function (e) {

    showHide($(this));

  });

  // show/hide our target depending on toggle state

  function showHide(el) {

    var target = el.data("showhideTarget"),

      value = el.prop("checked") ? el.val() : "";

    // hide all targets by default

    $(target).not(".hide").addClass("hide");

    // show any targets with a matching target value

    $(target).filter("[data-showhide-target-value=\"" + value + "\"]").removeClass("hide");

  }

})(document, Granite.$);