show/hide radio group in design dialog in aem 6.4 (using editable templates)

srikary71884977

08-02-2019

Hi,

I am looking for a bright solution which would fix my issue soon. Suggestions would be appreciated.

Q) I need to show the radio group based on the selection of one checkbox.

Here in my case i am hiding the image tab in dialog and using the show checkbox from design dialog can make my image tab visible at dialog level.

I am also having image type to be selected in design dialog based on radio group.

designDialogissue.png

In the above image when i check the show image checkbox the fields related to image should be shown (like imagetype).

if the checkbox is unchecked the imageType should be hidden.

Note: need to hide the imagetype by default and it should only be shown when the show image checkbox is selected.

I am also sharing my JS code here:

(function($) {

    "use strict";

    function toggleInputs(imageShow) {

        var imageType = $(".cmp-ctaTeaser--design-imgtype");

        alert('Hello');

        if (imageShow.checked) {

            alert('Hello');

            imageType.addClass("show");

            imageType.find("input").attr("aria-required", "false");

        } else {

            imageType.removeClass("show");

            imageType.find("input").attr("aria-required", "true");

        }

    }

    $(document).on("coral-component:attached", ".cmp-ctaTeaser--design-imgshow", function(e) {

        toggleInputs(e.target);

    });

    $(document).on("change", ".cmp-ctaTeaser--design-imgshow", function(e) {

        toggleInputs(e.target);

    });

})(jQuery);

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Many thanks in advance,

Srikar.

Accepted Solutions (0)

Answers (1)

Answers (1)

Gaurav-Behl

MVP

08-02-2019

Could you explain how do you interact with the design dialog using editable templates as mentioned in the title?

What is the error that you get with your js code?