如何根据其他复选框的状态显示/隐藏AEM中的复选框和文本字段？

Question

我正在尝试在AEM中获得以下结果：

checkbox1显示/隐藏textfield1和checkbox2。 Checbox2显示/隐藏textfield2。

目前，我可以使用下面的代码显示/隐藏textfield1和checkbox2，但是我无法使checkbox2显示/隐藏textfield2：

<items jcr:primaryType="nt:unstructured">

            <displayTextfield1
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                    text="Display textfield1"
                    fieldDescription="Check to display textfield1"
                    name="./displayTextfield1"
                    uncheckedValue="{Boolean}false"
                    checked="{Boolean}false"
                    value="{Boolean}true"
                    granite:class="cq-dialog-showhide">

                <granite:data
                        jcr:primaryType="nt:unstructured"
                        cq-dialog-showhide-target=".showhide-textfield1"
                        cq-msm-lockable="./displayTextfield1"/>
            </displayTextfield1>

            <displayTextfield1Hint
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
                    name="./displayTextfield1@TypeHint"
                    value="Boolean" />


            <textfield1PlaceHolder
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                    fieldLabel="Place holder textfield1"
                    name="./textfield1PlaceHolder"
                    granite:class="showhide-textfield1">
                <granite:data
                        jcr:primaryType="nt:unstructured"
                        cq-dialog-showhide-value="true"
                        cq-msm-lockable="./textfield1PlaceHolder"/>
            </textfield1PlaceHolder>

            <displayTextfield2
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                    text="display textfield2"
                    name="./displayTextfield2"
                    uncheckedValue="{Boolean}false"
                    checked="{Boolean}false"
                    value="{Boolean}true"
                    granite:class="showhide-textfield1">
                <granite:data
                        cq-dialog-showhide-target=".showhide-textfield2"
                        jcr:primaryType="nt:unstructured"
                        cq-dialog-showhide-value="true"
                        cq-msm-lockable="./displayTextfield2"/>
            </displayTextfield2>

            <displayTextfield2Hint
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
                    name="./displayTextfield2@TypeHint"
                    value="Boolean" />

            <displayTextfield2PlaceHolder
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                    fieldLabel="display Textfield2"
                    name="./displayTextfield2PlaceHolder"
                    granite:class="showhide-textfield2">
                <granite:data
                        jcr:primaryType="nt:unstructured"
                        cq-dialog-showhide-value="true"
                        cq-msm-lockable="./displayTextfield2PlaceHolder"/>
            </displayTextfield2PlaceHolder>

您能帮我吗？谢谢！

Answer 1

尝试编写自定义侦听器，因为它将给您带来更大的灵活性。

您的侦听器代码可以是这样的东西

var $form = $(this).closest("form.foundation-form"), 
var checkBox2 = $form.find("[name='./nameOfCheckBox2']").val(),
var textBox2 = $form.find("[name='./nameOfTextBox2']").val()

然后基于变量checkBox2显示和隐藏textBox2

[Here是一个博客，更详细地说明了步骤。