show/hide radio group in design dialog in aem 6.4 (using editable templates)
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.
