Support Article
Radio button selection changes when radio button text is clicked
SA-46627
Summary
Radio button selection changes on clicking a radio button text from a different row.
Error Messages
Not Applicable
Steps to Reproduce
- Create a section with two radio buttons, Yes and No values
- Include this section in a field in the repeat grid
- Create a case
- Select the radio button with value Yes in first row of the Grid
- In second row of the grid, click the radio button label No, not the radio button field. This changes the radio button selection of the first row to No from Yes.
Root Cause
The hierarchy or nested nature of the properties is different. As a result, only the child property is considered for the ID. Hence, all the radio buttons in this use case have the same ID, and clicking any label toggles the state of the first radio button.
Resolution
Perform the following local-change:
1. Add the below script to userWorkForm. <script>
/* Fire the right radio button on click of label *
function fireRadioButtons() {
$('.myclass label[for]').click(function(e) {
// Prevent default action of auto firing
e.preventDefault();
var labelID = $(this).attr('for');
// Look for the closest input
$(this).siblings($("[id=" + labelID)).click();
});
}
/* When the DOM is loaded invoke harness_execute *
$(function() {
// Attach to harness onloads
var e = window.event;
pega.u.d.harness_execute(fireRadioButtons, true, e);
});
</script>
2. Include the 'myclass' style element defined above to the radio buttons.
Published March 22, 2018 - 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.