休会フォームの注意を「読みました」のチェックボックスとボタンが連動するようにした

app/javascript/hibernation_agreements.js

@@ -0,0 +1,14 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const checkbox = document.querySelector('.js-hibernation-agreements-checkbox')
+  const submit = document.querySelector('.js-hibernation-agreements-submit')
+
+  checkbox.addEventListener('change', () => {
+    if (checkbox.checked) {
+      submit.classList.remove('is-disabled')
+      submit.classList.add('is-danger')
+    } else {
+      submit.classList.add('is-disabled')
+      submit.classList.remove('is-danger')
+    }
+  })
+})

app/javascript/packs/application.js

@@ -63,6 +63,7 @@ import '../training-info-toggler.js'
 import '../company-products.js'
 import '../welcome_message_for_adviser.js'
 import '../regular-events.js'
+import '../hibernation_agreements.js'
 
 import VueMounter from '../VueMounter.js'
 import Hello from '../components/hello.vue'

app/views/hibernation/new.html.slim

@@ -75,7 +75,7 @@ header.page-header
             .block-checks.is-1-item.is-centered
               .block-checks__item
                 .a-block-check.is-checkbox
-                  input.a-toggle-checkbox#aaa(type='checkbox')
+                  input.a-toggle-checkbox.js-hibernation-agreements-checkbox#aaa(type='checkbox')
                   label.a-block-check__label(for='aaa')
                     | 読みました
 
@@ -86,5 +86,5 @@ header.page-header
                 class: 'a-button is-md is-secondary is-block'
             li.form-actions__item.is-main
               = f.submit '休会する',
-                class: 'a-button is-md is-danger is-block',
+                class: 'a-button is-md is-block js-hibernation-agreements-submit is-disabled',
                 data: { confirm: '本当によろしいですか？' }