fix: checkbox/label should have unqiue id/for attribues for clickable label

At least in case of the Bootstrap 4 theme the checkbox `<input>` is *not* nested under the `<label>`. So for the label to trigger the checkbox we need to connect those with an ID.

Author: stroebjo

src/editors/checkbox.js

@@ -29,11 +29,14 @@ export class CheckboxEditor extends AbstractEditor {
   build () {
     const self = this
     this.label = this.header = this.theme.getCheckboxLabel(this.getTitle(), this.isRequired())
+    this.label.htmlFor = this.formname
+
     if (this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description)
     if (this.options.infoText && !this.options.compact) this.infoButton = this.theme.getInfoButton(this.options.infoText)
     if (this.options.compact) this.container.classList.add('compact')
 
     this.input = this.theme.getCheckbox()
+    this.input.id = this.formname
     this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton)
 
     if (this.schema.readOnly || this.schema.readonly) {

src/editors/multiselect.js

@@ -65,9 +65,12 @@ export class MultiSelectEditor extends AbstractEditor {
       this.inputs = {}
       this.controls = {}
       for (i = 0; i < this.option_keys.length; i++) {
+        const id = this.formname + i.toString()
         this.inputs[this.option_keys[i]] = this.theme.getCheckbox()
+        this.inputs[this.option_keys[i]].id = id
         this.select_options[this.option_keys[i]] = this.inputs[this.option_keys[i]]
         const label = this.theme.getCheckboxLabel(this.option_titles[i])
+        label.htmlFor = id
         this.controls[this.option_keys[i]] = this.theme.getFormControl(label, this.inputs[this.option_keys[i]])
       }