feat(multiplecheckbox): add disable others option (#112)

onebeyond · May 19, 2022 · d0c18c8 · d0c18c8
1 parent 2e20eed
commit d0c18c8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/example/src/forms.json b/example/src/forms.json
@@ -426,6 +426,11 @@
  "label": "Smart home function(TV links with IoT devices and sensors so you can turn on the lights, check fridge, run the robot etc. )",
  "value": "smart_home"
  },
+ {
+ "label": "None",
+ "value": "none",
+ "disableOthers": true
+ },
  {
  "label": "Other, please specify",
  "value": "other"

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Questions/MultipleCheckboxes/index.js b/src/Questions/MultipleCheckboxes/index.js
@@ -8,6 +8,24 @@ import Label from '../../Fields/Label'
 
 import ReactMarkdown from 'react-markdown'
 
+const disableOthers = (e) => {
+ Object.entries(e.target.form).forEach(([, v]) => {
+ if (e.target.checked === true) {
+ if (v.type === 'checkbox' && v.name === e.target.name) {
+ v.checked = false
+ v.disabled = true
+ }
+ e.target.disabled = false
+ e.target.checked = true
+ }
+ if (e.target.checked === false) {
+ if (v.type === 'checkbox' && v.name === e.target.name) {
+ v.disabled = false
+ }
+ }
+ })
+}
+
 const QuestionMultipleCheckboxes = ({ component, form, question, useForm }) => {
  const { getValues, errors, register } = useForm
  return (
@@ -70,6 +88,7 @@ const QuestionMultipleCheckboxes = ({ component, form, question, useForm }) => {
  : () => true
  }
  })}
+ onChange={option.disableOthers && disableOthers}
  />
  {option.src ? (
  <img src={option.src} />