Checkbox setDisabled(true) not working

[vdhim23]

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

[Mshaji]

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.

[vdhim23]

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.

[Mshaji]

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

http://dev.day.com/docs/en/cq/5-5/widgets-api/output/CQ.Ext.form.Checkbox.html

[vdhim23]

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

http://dev.day.com/docs/en/cq/5-5/widgets-api/output/CQ.Ext.form.Checkbox.html

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

[Mshaji]

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

[smacdonald2008 · Accepted solution]

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

[AmitVishwakarma]

To fix the issue with setDisabled(true) not working as expected:

1. Ensure Checkbox State is Restored: Manually set the disabled state when reopening the dialog.
2. Check arr.count: Make sure arr.count includes all items, not just the selected tab.
3. Correct Field Type: Confirm that findByType('selection') targets the correct checkbox component.
4. Force Re-render: Apply setDisabled and ensure the UI is updated.
5. Check Field Value Consistency: Ensure the checkbox values are correctly loaded on dialog reopen.

Add debug logs to verify the state of checkboxes on opening and closing the dialog.