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

SOLVED

Checkbox setDisabled(true) not working

Avatar

Level 5

Hi

I am using custommultifield component which have a text and a checkbox. I want to achieve one selection of checkbox & other makes disable. Below is my listener for selection changed which is one on the item in multifield.

function(selection,value,checked){ var dialog = this.findParentByType('dialog'); var itemTemp; var multifield = this.findParentByType('customconfigmultifield'); var arr = multifield.items; console.log(arr.getCount()); if(checked){ for (var i = 0 ; i < arr.getCount()-1 ; i ++){ itemTemp = arr.get(i).findByType('selection')[0]; itemTemp.setDisabled(true); } selection.setDisabled(false); } else{ for (var i = 0 ; i < arr.getCount() ; i ++){ itemTemp = arr.get(i).findByType('selection')[0]; itemTemp.setDisabled(false); } } }

At begin when i drop the component and select one checkbox, its disables all other checkboxes. After Ok when i edit/reopen the dialog, It shows checkbox above the selected one are disabled, but below that all are enable along with that. Also my arr.count comes only till the selected tab. Here is the image of selected node in crxde.

Dialog.xml :

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="cq:Dialog" title="dialog" xtype="dialog"> <items jcr:primaryType="cq:Widget" xtype="tabpanel"> <items jcr:primaryType="cq:WidgetCollection"> <tabcontrolpanel jcr:primaryType="cq:Panel" itemId="panel1" title="Tabs Panel"> <items jcr:primaryType="cq:WidgetCollection"> <typeconfigs jcr:primaryType="cq:Widget" fieldLabel="Tabs" itemId="customfield" name="./options" width="{Long}100" xtype="customconfigmultifield"> <fieldConfigs jcr:primaryType="cq:WidgetCollection"> <option jcr:primaryType="cq:Widget" hidden="{Boolean}true" name="option_name" xtype="textfield"/> <optionval jcr:primaryType="cq:Widget" allowBlank="{Boolean}false" defaultValue="Test" fieldLabel="Title" maxLength="{Long}40" name="optionval" xtype="textfield"/> <displayoptions jcr:primaryType="cq:Widget" defaultValue="nonactive" itemId="dispotions" name="selecttab" type="checkbox" xtype="selection"> <options jcr:primaryType="cq:WidgetCollection"> <one jcr:primaryType="nt:unstructured" text="Refresh tab list" value="active"/> </options> <listeners jcr:primaryType="nt:unstructured" selectionchanged="listener posted above"/> </displayoptions> </fieldConfigs> </typeconfigs> </items> </tabcontrolpanel> </items> </items>

 

Thanks

1 Accepted Solution

Avatar

Correct answer by
Level 10

When working with Checkboxes, the structure of the dialog is not that important (specifying the Dialog.xml does not really help here).

The important thing is that you properly hook into the custom xtype (JS file) and the code that you place in this JS file. In that JS file, you can use checkbox events and methods. See:

http://dev.day.com/docs/en/cq/current/widgets-api/index.html?class=CQ.Ext.form.Checkbox

To learn how to build a custom xtype - including how to define the custom JS and hook into it from a dialog - see: 

http://helpx.adobe.com/experience-manager/using/creating-custom-xtype.html

View solution in original post

6 Replies

Avatar

Level 8

It seems that in you code you are making decison based on checked value coming from listener. If this is true you are disabling all items of selection.

I am not sure how do you define your listener event in dialog.xml and what you are trying to achieve.

If you could provide some more explanation and fields from dialog.xml where u r firing these events, that may help us.

Avatar

Level 5

Mshajiahmed wrote...

It seems that in you code you are making decison based on checked value coming from listener. If this is true you are disabling all items of selection.

I am not sure how do you define your listener event in dialog.xml and what you are trying to achieve.

If you could provide some more explanation and fields from dialog.xml where u r firing these events, that may help us.

 

 

I have posted my dialog.xml, Can you please advice.

Avatar

Level 8

As per the documentation from CQ5 widgets, check box seems to be having a different event check instead of selectionchanged. Can you please try using check event instead of selectionchanged

Here is the syntax for check event

check : ( CQ.Ext.form.Checkbox this, Boolean checked )

Fires when the checkbox is checked or unchecked.
Listeners will be called with the following arguments:
  • this : CQ.Ext.form.Checkbox
    This checkbox
  • checked : Boolean
    The new checked value
  •  

Avatar

Level 5

Mshajiahmed wrote...

As per the documentation from CQ5 widgets, check box seems to be having a different event check instead of selectionchanged. Can you please try using check event instead of selectionchanged

Here is the syntax for check event

check : ( CQ.Ext.form.Checkbox this, Boolean checked )

Fires when the checkbox is checked or unchecked.
Listeners will be called with the following arguments:
  • this : CQ.Ext.form.Checkbox
    This checkbox
  • checked : Boolean
    The new checked value
  •  

 

Thanks Do you have any idea via which event we can uncheck the value of checkbox? 

Avatar

Level 8

check : ( CQ.Ext.form.Checkbox this, Boolean checked )

Avatar

Correct answer by
Level 10

When working with Checkboxes, the structure of the dialog is not that important (specifying the Dialog.xml does not really help here).

The important thing is that you properly hook into the custom xtype (JS file) and the code that you place in this JS file. In that JS file, you can use checkbox events and methods. See:

http://dev.day.com/docs/en/cq/current/widgets-api/index.html?class=CQ.Ext.form.Checkbox

To learn how to build a custom xtype - including how to define the custom JS and hook into it from a dialog - see: 

http://helpx.adobe.com/experience-manager/using/creating-custom-xtype.html