Skip to main content
K
karanmahi
Level 4
February 25, 2019

AEM 6.4 – Toggle dialog fields based on Checkbox selection

  • February 25, 2019
  • 1 reply
  • 4269 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Prince_Shivhare
Community Advisor
Prince_ShivhareCommunity Advisor
Community Advisor
February 26, 2019

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

K
karanmahiAuthor
Level 4
February 26, 2019

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.$);

Terms & ConditionsAccessibility statement

Loading footer...