imp: Improve look and behaviour of disabled checkboxes

Probesys · Jan 30, 2024 · 8862664 · 8862664
1 parent 272eec1
commit 8862664
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/assets/javascripts/controllers/checkboxes_controller.js b/assets/javascripts/controllers/checkboxes_controller.js
@@ -14,7 +14,7 @@ export default class extends Controller {
     }
 
     checkAll (event) {
-        const checkboxes = this.element.querySelectorAll('input[type="checkbox"]');
+        const checkboxes = this.element.querySelectorAll('input[type="checkbox"]:not([disabled])');
 
         checkboxes.forEach((checkbox) => {
             checkbox.checked = true;
@@ -24,7 +24,7 @@ export default class extends Controller {
     }
 
     uncheckAll (event) {
-        const checkboxes = this.element.querySelectorAll('input[type="checkbox"]');
+        const checkboxes = this.element.querySelectorAll('input[type="checkbox"]:not([disabled])');
 
         checkboxes.forEach((checkbox) => {
             checkbox.checked = false;

diff --git a/assets/stylesheets/components/forms.css b/assets/stylesheets/components/forms.css
@@ -132,8 +132,8 @@ input[type="checkbox"]:focus + label::before {
     outline: var(--width-outline) solid var(--color-primary9);
 }
 
-input[type="checkbox"]:checked + label::before,
-input[type="radio"]:checked + label::before {
+input[type="checkbox"]:not([disabled]):checked + label::before,
+input[type="radio"]:not([disabled]):checked + label::before {
     border-color: var(--color-grey11);
 }
 
@@ -172,6 +172,11 @@ input[type="radio"]:checked + label::after {
     border-radius: 50%;
 }
 
+input[type="checkbox"]:disabled:checked + label::after,
+input[type="radio"]:disabled:checked + label::after {
+    border-color: var(--color-grey11);
+}
+
 select {
     width: 100%;
     padding: 0.5rem 0.75rem;