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

[srikary71884977]

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.

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.

[Gaurav-Behl]

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?