in cq dialog, disable textfield when checkbox is not ticked

Question

A cq dialog question, I have two widget in my dialog, textfield and checkbox. what i need is, only when checkbox is ticked (true), then textfield will be available for author to edit, when checkbox is not ticked, the textfield must be disabled...

I have been search a while, couldnt find the answer, please advise , here is my two widgets..

<checkbox
    jcr:primaryType="cq:Widget"
    defaultValue="{Boolean}false"
    fieldDescription="this is a checkbox"
    fieldLabel="enable something"
    name="./checkbox"
    type="checkbox"
    xtype="selection" />
<textfield
    jcr:primaryType="cq:Widget"
    fieldDescription= "this is a textfield"
    fieldLabel="textfield..."
    name="./textfield"
    enable={boolean}checkbox   // something gose here to make it enable or disable...
    xtype="textfield"/>

rakhi4110 rakhi4110 · Accepted Answer · 2014-07-07T17:12:16

Yes, you can achieve this by attaching a listener to the selectionchanged event that is triggered when the checkbox is selected. The API provides the list of public events that would be triggered for a widget.

In order to attach a listener to an event, you need to create a node of type nt:unstructured called listeners under the required widget and add the event name as a property to the node, whose value would be the handler function which you would like to execute.

enter image description here

function(comp, val, isChecked) {
    var dlg = comp.findParentByType("dialog"); //find the dialog
    var textfield = dlg.getField("./textfield"); //get the field to disable

    /*hide or show component based on checked value */
    isChecked ? textfield.enable() : textfield.disable(); 
}

The structure of the dialog within the panel is

<checkbox
    jcr:primaryType="cq:Widget"
    defaultValue="{Boolean}false"
    fieldDescription="this is a checkbox"
    fieldLabel="enable something"
    name="./checkbox"
    type="checkbox"
    xtype="selection">
    <listeners jcr:primaryType="nt:unstructured" selectionchanged="function(comp, val, isChecked) {
        var dlg = comp.findParentByType("dialog");
        var textfield = dlg.getField("./textfield");
        isChecked ? textfield.enable() : textfield.disable(); 
    }"/>
</checkbox>
<textfield
    jcr:primaryType="cq:Widget"
    fieldDescription= "this is a textfield"
    fieldLabel="textfield..."
    name="./textfield"
    xtype="textfield"/>

in cq dialog, disable textfield when checkbox is not ticked

1 Answers