Checkbox setDisabled(true) not working | Community
Skip to main content
V
vdhim23
Level 5
October 16, 2015
Solved

Checkbox setDisabled(true) not working

  • October 16, 2015
  • 7 replies
  • 3083 views

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

Best answer by smacdonald2008

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

7 replies

M
Community Advisor
MshajiCommunity Advisor
Community Advisor
October 16, 2015

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.

V
vdhim23Author
Level 5
October 16, 2015

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.

M
Community Advisor
MshajiCommunity Advisor
Community Advisor
October 16, 2015

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

  •  

V
vdhim23Author
Level 5
October 16, 2015

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? 

M
Community Advisor
MshajiCommunity Advisor
Community Advisor
October 16, 2015

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

smacdonald2008
smacdonald2008Accepted solution
Level 10
October 16, 2015

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
Community Advisor
AmitVishwakarmaCommunity Advisor
Community Advisor
January 18, 2025

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.

Terms & ConditionsAccessibility statement

Loading footer...