AEM 6.5 Next button not enabled when radio button and checkboxes are set programmatically

[Srinivas_Opti]

Hello,

Could you please provide input

In AEM Form I have radio and checkbox component with multiple radio and checkboxes in it as per the below snapshot

Requirement: -

My requirement is that when I select radio button and checkbox it must show that checked checkboxes value correctly.

Say For

 Radio-3, I select certain checkboxes and

 Radio-4, I select different checkbox it must show the values correctly

Currently it is not working as expected, as when I set programmatically the checkbox the next button on the form does not show enabled

Issue: -

Next button does not get enabled correctly even though check box is checked programmatically. How to resolve this ?? looks like an validation issue is happening with checkboxes, it detects as if they are not checked in .

code I am using is mentioned below: -

let radioButtonSelectionBoolean = new Array(5).fill(false); //this will create [false,false,false,false,false]

let radioButtonSelectedCheckBox = new Array(5).fill([]); ////this will create [[],[],[],[],[]]

//checkbox component with the name checkboxes

// This will reset the attributes of checkbox based on the change as I noticed that few properties does not set when set programmatically

$(`input[name="checkboxes"]`).change(function() {

let check = $(this);

//when we uncheckes the checkbox

if (!$(this).prop('checked')) {

check.parent().parent().removeAttr("checked");

check.parent().parent().removeAttr("aria-invalid");

check.parent().parent().attr("value", "-100");

check.parent().parent().attr("aria-checked", "false");

check.removeAttr("checked");

} else {

//when we check any check box

check.parent().parent().attr("checked", "checked");

check.parent().parent().attr("aria-invalid", "false");

check.parent().parent().attr("value", check.val());

check.parent().parent().attr("aria-checked", "true");

check.parent().parent().attr("aria-checked", "true");

}

let checkboxIndexSelected = [];

$.each($("input[name='checkboxes']:checked"), function() {

checkboxIndexSelected.push($(this).val());

});

const radioButtonSelectedIndex = getRadioButtonSelected();

radioButtonSelectionBoolean[radioButtonSelectedIndex] = true; // on selection of 3 and 4 radio the array will be radioButtonSelectionBoolean=[false,false,true,true,false]

radioButtonSelectedCheckBox[radioButtonSelectedIndex] = checkboxIndexSelected;

// for radio3 if checkbox selected 1 and 2 and radio 4 if checkbox selected 3 and 4 then

//radioButtonSelectedCheckBox=[[],[],["1","2"],["3","4"],[]]

});

//This method will set the checkboxs based on the radio selection

const setCheckBoxBasedOnRadioButton = (radioButtonSelectedIndex) => {

//reset all the checkbox for each radio button selection and then set based on radio button selection

let checkboxesPanel = guideBridge.resolveNode("checkboxes");

checkboxesPanel.resetData();

$(`.checkboxes input[type='checkbox']`).prop("checked", false);

if (radioButtonSelectionBoolean[radioButtonSelectedIndex]) {

const checkBoxSelectedArray = radioButtonSelectedCheckBox[radioButtonSelectedIndex];

for (let checkbox of checkBoxSelectedArray) {

const selextedCheckboxIndex = parseInt(checkbox.value) - 1;

$('.checkboxes').eq(selextedCheckboxIndex).prop("checked", true); //we set the checkbox based on the arary value

}

}

}

Thanks

[Srinivas_Opti]

Any inputs as how to resolve on this issue??

[Srinivas_Opti · Accepted solution]

Was able to resolve the issue with change event 

$('.checkboxes').eq(selextedCheckboxIndex).prop("checked", true).change();

This will trigger the change event for the checkbox and works correctly

reference:

https://stackoverflow.com/questions/19505011/checkbox-checked-with-prop-does-not-fire-events-attache...