attach a single event handler to detect radio button changes instead of one per input

1 files changed, 8 insertions, 8 deletions

diff --git a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
index 6d227177cb4..152f76ff7af 100644
--- a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
@@ -24,15 +24,15 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   // hide extra auto devops settings based on data-attributes
-  const autoDevOpsSettings = document.querySelectorAll('input[data-hide-extra-settings]');
+  const autoDevOpsSettings = document.querySelector('.js-auto-devops-settings');
   const autoDevOpsExtraSettings = document.querySelector('.js-extra-settings');
 
-  autoDevOpsSettings.forEach(input => {
-    input.addEventListener('click', () =>
-      autoDevOpsExtraSettings.classList.toggle(
-        'hidden',
-        input.dataset.hideExtraSettings === 'true',
-      ),
-    );
+  autoDevOpsSettings.addEventListener('click', event => {
+    const targetData = event.target && event.target.dataset;
+    if (targetData.hideExtraSettings === 'true') {
+      autoDevOpsExtraSettings.classList.add('hidden');
+    } else if (targetData.hideExtraSettings === 'false') {
+      autoDevOpsExtraSettings.classList.remove('hidden');
+    }
   });
 });