Remove show/hide behaviour from permissions form

In research we found that:
- people didn’t initially realise that the permissions expanded when the
  ‘admin’ option was selected
- not having all the options visible at once makes it hard to know what
  permissions you are (and more importantly aren’t) giving to people

This commit makes it so that:
- the options within the ‘admin’ option are always visible
- a bit of Javascript logic makes it so you can pick ‘caseworker’ and
  ‘manage service’, for example (by deselecting one when you pick the
  other)

app/assets/javascripts/conditionalRadios.js

@@ -6,18 +6,35 @@
     this.start = function(component) {
 
       const $radios = $('[type=radio]', $(component)),
-            showHidePanels = function() {
-              $radios.each(function() {
-                $('#panel-' + $(this).attr('value'))
-                  .toggleClass(
-                    'js-hidden',
-                    !$(this).is(":checked")
-                  );
-              });
-            };
+            $checkboxes = $('[type=checkbox]', $(component));
 
-      $radios.on('click', showHidePanels);
-      showHidePanels();
+      let clearable = true;
+
+      let clearInvalidSelections = function() {
+        if (!clearable) {
+          clearable = true;
+          return;
+        }
+        $radios.each(function() {
+          let checked = $(this).is(':checked');
+          $('#panel-' + $(this).attr('value'))
+            .each(function() {
+              if (!checked) {
+                $('[type=checkbox]', this).removeAttr('checked');
+              }
+            });
+        });
+      };
+
+      let selectParent = function() {
+        clearable = false;
+        let parentValue = $(this).parents("[id^='panel-']").attr('id').replace('panel-', '');
+        $('[value=' + parentValue + ']').trigger('click');
+      };
+
+      $checkboxes.on('click', selectParent);
+      $radios.on('click', clearInvalidSelections);
+      clearInvalidSelections();
 
     };
   };