coral-checkbox issue in Carousel
Dear All,
I have a checkbox item called Add Button in my Carousel and the requirement is that when somebody will check the checkbox Add Button , then button text and button link will be visible.
So below is the cq.dialog
<addbutton
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./includebutton"
text="Add button (bottom)"
value="{Boolean}true"/>
<buttontext
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Button Text"
name="./btntext"/>
<link
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
fieldLabel="Button Link"
name="./link"
rootPath="/content/Sunita"/>
Below is the HTL and JS for this requirement.
/************************* HTL ***********************/
<div data-sly-test="${item.includebutton}" class="hero-cta-landing">
<sly data-sly-test="${item.btnstyle}">
<a class="landing-marquee-btn btn btn-trp-primary ${item.btnstyle}" href="${item.link @ extension='html'}" target="${item.newWindow?'_blank':''}">${item.btntext}</a>
</sly>
<sly data-sly-test="${!item.btnstyle}">
<a class="landing-marquee-btn btn btn-trp-primary btn-trp-primary" href="${item.link @ extension='html'}" target="${item.newWindow?'_blank':''}">${item.btntext}</a>
</sly>
</div>
/************************* JS ***********************/
(function ($, $document) {
$document.ready(function () {
$document.on("dialog-ready", function() {
if($("coral-checkbox[name='./includebutton'] :checked").length === 1){
$("input[name='./btntext']").parent().show();
$("input[name='./buttonLink']").parent().show();
} else {
$("input[name='./btntext']").parent().hide();
$("input[name='./buttonLink']").parent().hide();
}
$("coral-checkbox[name='./includebutton']").on("click", function() {
if($("coral-checkbox[name='./includebutton'] :checked").length === 1){
$("input[name='./btntext']").parent().show();
$("input[name='./buttonLink']").parent().show();
} else {
$("input[name='./btntext']").parent().hide();
$("input[name='./buttonLink']").parent().hide();
}
});
});
});
}(jQuery, jQuery(document)));
The issue here is , when I am trying to check the Add button checkbox then automatically in every carousel item the btntext and buttonLink is coming ,
as shown in below figure.
You can observe in the last picture that in the 2nd item , though Add Button is not checked in , still the button text is coming.
******************** BEFORE CHECKED IN ADD BUTTON****************************************
************** AFTER CHECKED IN ADD BUTTON****************************************
Please help me on this.
Thanks in advance
