Support Article
Mutually exclusive check boxes are not functioning properly
SA-5268
Summary
There is a section in the Application screen where we have implemented row repeat type layout. each row comes with a check box, which when selected , enables the ability to edit the row/insert data. Among them, there are 2 check boxes which are mutually exclusive. i.e. if you select one, the other should be disabled and vice versa. But this is not functioning as expected.
Error Messages
None on screen
Steps to Reproduce
1. Launch the screen.
2. Select a 'Product name' from the dropdown
3. the check box eneabled section will appear. one of the mutually exclusive row comes with check box pre-ticked.
4. try to select another of the mutually exclusive check box.
the other one does not get ticked.
Root Cause
The root cause of this problem is a defect in Pegasystems’ code/rules.
The issue occurs when the checkboxes are selected fastly with no time gap in between two selections.
There are many events which get called on selection of a checkbox. And because of no time gap b/w the selection, some of the events are getting queued up and some of them are skipped. Hence causing the issue.
Resolution
This issue is resolved through the following local change: Onchange of the checkboxes runs a javascript which will disable all the checkboxes for a while, stopping the user to select the other checkboxes. Thereby increasing the time b/w two selections.
This has reduced the frequency of the issue.
The javascript suggetsed is
<script>
function disableCheckBox(){
var checkBoxes = [];
var checkBoxesChecked = [];
checkBoxes = pega.util.Dom.getElementsByAttribute("class", "custom_check");
checkBoxesChecked = pega.util.Dom.getElementsByAttribute("class", "custom_check_checked");
for(i=0;i<checkBoxes.length;i++){
checkBoxes[i].style.display = "none";
}
for(i=0;i<checkBoxesChecked.length;i++){
checkBoxesChecked[i].style.display = "none";
}
}
var orig;
if(!orig)
orig = pega.u.d.handleReloadSuccess;
pega.u.d.handleReloadSuccess = function (responseObj){
var checkBoxes = [];
var checkBoxesChecked = [];
checkBoxes = pega.util.Dom.getElementsByAttribute("class", "custom_check");
checkBoxesChecked = pega.util.Dom.getElementsByAttribute("class", "custom_check_checked");
if(checkBoxes.length && checkBoxesChecked.length){
for(i=0;i<checkBoxes.length;i++){
checkBoxes[i].style.display = "block";
}
for(i=0;i<checkBoxesChecked.length;i++){
checkBoxesChecked[i].style.display = "block";
}
}
orig.call(this,responseObj);
};
</script>
Published January 31, 2016 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.