Adds programmatic trigger to checkbox change

UK-SBCoA · Nov 8, 2023 · d0f5277 · d0f5277
1 parent a028ed2
commit d0f5277
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 deletions.
diff --git a/src/UDS.Net.Forms/Pages/UDS3/D1.cshtml b/src/UDS.Net.Forms/Pages/UDS3/D1.cshtml
@@ -1,4 +1,4 @@
-@page  "{id:int?}"
+@page "{id:int?}"
 @model UDS.Net.Forms.Pages.UDS3.D1Model
 @{
     Layout = "_LayoutForm";
@@ -46,7 +46,7 @@
         </dl>
     </div>
 </div>
-<div>
+<div data-controller="fancycheckboxes">
     <div class="mt-10 space-y-8 border-b border-gray-900/10 pb-12 sm:space-y-0 sm:divide-y sm:divide-gray-900/10 sm:border-t sm:pb-0">
         <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">
             <label asp-for="D1.DXMETHOD"><span class="counter"></span> @Html.DisplayNameFor(m => m.D1.DXMETHOD)</label>
@@ -292,7 +292,7 @@
             </div>
         </div>
 
-        <table class="ml-2 table-auto min-w-full divide-y divide-gray-300" data-controller="fancycheckboxes">
+        <table class="ml-2 table-auto min-w-full divide-y divide-gray-300">
             <caption class="caption-top text-sm text-gray-500">
                 Select one syndrome from 5a-5e as being Present (all others will default to Absent in the NACC database), and then <strong>CONTINUE TO QUESTION 6</strong>. If you select MCI below, it should meet the MCI core clinical criteria outlined above.
             </caption>
@@ -345,7 +345,7 @@
                                 <div class="relative flex items-start">
                                     <span class="mr-3 block text-sm font-medium leading-6 text-gray-900"></span>
                                     <div class="flex h-6 items-center">
-                                        @Html.CheckBox("D1.MCIAPLUS", Model.D1.MCIAPLUS, new { @class = "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", data_affects = "true", data_affects_toggle_targets = "[ \"D1.MCIAPLAN\" , \"D1.MCIAPATT\" , \"D1.MCIAPEX\" ,\"D1.MCIAPVIS\" ]",data_fancycheckboxes_target= "checkbox" })
+                                        @Html.CheckBox("D1.MCIAPLUS", Model.D1.MCIAPLUS, new { @class = "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", data_affects = "true", data_affects_toggle_targets = "[ \"D1.MCIAPLAN\", \"D1.MCIAPATT\",\"D1.MCIAPEX\",\"D1.MCIAPVIS\"]", data_fancycheckboxes_target= "checkbox" })
                                     </div>
                                     <div class="ml-3 text-sm leading-6">
                                         <label for="D1_MCIAPLUS" class="font-medium text-gray-900"><span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800">1</span></label>
@@ -413,7 +413,7 @@
                                 <div class="relative flex items-start">
                                     <span class="mr-3 block text-sm font-medium leading-6 text-gray-900"></span>
                                     <div class="flex h-6 items-center">
-                                        @Html.CheckBox("D1.MCINON1", Model.D1.MCINON1, new { @class = "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", data_affects = "true", data_affects_toggle_targets = "[ \"D1.MCIN1LAN\" , \"D1.MCIN1ATT\" , \"D1.MCIN1EX\" ,\"D1.MCIN1VIS\" ]",data_fancycheckboxes_target= "checkbox" })
+                                        @Html.CheckBox("D1.MCINON1", Model.D1.MCINON1, new { @class = "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", data_affects = "true", data_affects_toggle_targets = "[ \"D1.MCIN1LAN\" , \"D1.MCIN1ATT\" , \"D1.MCIN1EX\" ,\"D1.MCIN1VIS\" ]", data_fancycheckboxes_target= "checkbox" })
                                     </div>
                                     <div class="ml-3 text-sm leading-6">
                                         <label for="D1_MCINON1" class="font-medium text-gray-900"><span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800">1</span></label>

diff --git a/src/UDS.Net.Forms/wwwroot/js/js_controllers/fancycheckboxes_controller.js b/src/UDS.Net.Forms/wwwroot/js/js_controllers/fancycheckboxes_controller.js
@@ -1,24 +1,21 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-    static targets = ['checkbox']
+  static targets = ['checkbox']
 
-    connect() {
-        this.checkboxTargets.forEach((checkbox) => {
-            checkbox.addEventListener('change', () => this.checkboxChange(checkbox))
-        })
-    }
+  connect() {
+    this.checkboxTargets.forEach((checkbox) => {
+      checkbox.addEventListener('click', () => this.checkboxChange(checkbox))
+    })
+  }
 
-    checkboxChange(selectedCheckbox) {
-        this.checkboxTargets.forEach((checkbox) => {
-            if (checkbox !== selectedCheckbox) {
-                checkbox.checked = false;
-                checkbox.disabled = false;
-            }
-        })
+  checkboxChange(selectedCheckbox) {
+    this.checkboxTargets.forEach((checkbox) => {
+      if (checkbox !== selectedCheckbox) {
+        checkbox.checked = false;
+        checkbox.dispatchEvent(new Event('change'))
+      }
+    })
 
-        if (selectedCheckbox.checked) {
-            selectedCheckbox.disabled = false;
-        }
-    }
+  }
 }