Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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


Level 2


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");


        if (imageShow.checked) {



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

        } else {


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



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



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





Many thanks in advance,


1 Reply


Community Advisor

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?