Toggle other text input

js/components/multi_checkbox_input.js

@@ -18,6 +18,7 @@ export default {
       default: () => []
     },
     initialValue: Array,
+    otherChecked: Boolean,
   },
 
 
@@ -26,7 +27,7 @@ export default {
     return {
       showError: showError,
       showValid: !showError && !!this.initialValue,
-      validationError: this.initialErrors.join(' ')
+      validationError: this.initialErrors.join(' '),
     }
   },
 
@@ -39,6 +40,9 @@ export default {
       })
       this.showError = false
       this.showValid = true
+    },
+    otherToggle: function() {
+      this.otherChecked = !this.otherChecked
     }
   }
 }

templates/components/multi_checkbox_input.html

@@ -29,10 +29,16 @@
         <ul>
           {% for f in field.choices %}
             <li>
+              {% if f[0] != 'other' %}
               <input type='checkbox' name='options' id='{{ field.name }}-{{ field.choices.index(f) }}'/>
               <label for='{{ field.name }}-{{ field.choices.index(f) }}'>{{ f[1] }}</label>
-              {% if f[0] == 'other' %}
-                <input type='text' name='options' id='{{ field.name }}-other' aria-expanded='false'/>
+              {% else %}
+                <input @click="otherToggle" type='checkbox' name='options' id='{{ field.name }}-{{ field.choices.index(f) }}'/>
+                <label for='{{ field.name }}-{{ field.choices.index(f) }}'>{{ f[1] }}</label>
+
+                <div v-show="otherChecked">
+                  <input type='text' name='options' id='{{ field.name }}-other' aria-expanded='false'/>
+                </div>
               {% endif %}
             </li>
           {% endfor %}