typeUserAttrs, doesn't render checkbox checked property correctly

Description:

Perhaps I am missing something but if I create a new custom attribute using typeUserAttr of type checkbox, when I render the form with existing data the checkbox is not checked if the value is true. This seems to work correctly for the required field.

Environment Details:

• formBuilder Version:
• Browser: Chrome
• OS:

Expected Behavior

Inserting formData for custom attributed will correctly check checkboxes.

Actual Behavior

The value attribute of the custom field is set to true but the box is not checked

Steps to Reproduce

jQuery(function($) {
  var fbTemplate = document.getElementById('build-wrap');
var options = {
      disabledActionButtons: [
        'data',
        'clear'
      ],
      disableFields: [
        'button',
        'autocomplete',
        'hidden',
        'file',
        'date',
        'header',
        'number'
      ],
      disabledAttrs: [
        'access',
        'multiple',
        'toggle',
        'placeholder',
        'className',
        'inline',
        'other',
        'subtype',
        'description',
        'maxlength',
        'rows'
      ],
      typeUserAttrs: {
        'radio-group': {
          randomize: {
            label: 'Randomize',
            type: 'checkbox'
          },
          feedback: {
            label: 'Feedback',
            type: 'text',
            placeholder: 'Insert feedback for this question here'
          }
        },
        'textarea': {},
        'checkbox-group': {
          randomize: {
            label: 'Randomize',
            type:"checkbox"
          },
          feedback: {
            label: 'Feedback',
            type: 'text',
            placeholder: 'Insert feedback for this question here'
          }
        },
        'select': {
          randomize: {
            label: 'Randomize',
            type: 'checkbox'
          },
          feedback: {
            label: 'Feedback',
            type: 'text',
            placeholder: 'Insert feedback for this question here'
          }
        },
        'text': {
          content: {
            label: 'Content',
            type: 'textArea',
            placeholder: 'Insert feedback for this question here'
          },
          feedback: {
            label: 'Feedback',
            type: 'text',
            placeholder: 'Insert feedback for this question here'
          }
        },
        'paragraph': {
          name: {
            label: 'Name',
            type: 'text'
          }
        }
      },
      formData: '[{"type":"checkbox-group","label":"Checkbox Group","name":"checkbox-group-1501853553952","feedback":"","randomize":true,"values":[{"label":"Option 1","value":"option-1","selected":true}]}]',
      dataType: 'json',
      layoutTemplates: {
        label: function (label, data) {
          return $('<label class="bright"/>')
            .attr('for', data.id)
            .append(label);
        }
      }
    };

  $(fbTemplate).formBuilder(options);
});

The value of the field randomize is set to true, but the box is not checked on load

Screenshot - (optional)

[joerou]

@AvKhushbu of course!

First I added the attributes to the type as below:

typeUserAttrs: {
  'radio-group': {
    randomize_values: {
      label: 'Randomize',
      type: 'checkbox'
    },
    always_correct: {
      label: 'Always correct',
      type: 'checkbox'
    },
  }
}

Then I created a function to check what the property was equal to and add the checked property accordingly

function fixCheckedProps(fld) {
    var randomizeField = $(fld).find('input.fld-randomize_values');

    // Also if the value is not set, because I wanted checked by default as well
    if ($(randomizeField).val() === 'on' || $(randomizeField).val() === ''){
      $(randomizeField).attr('checked', true);
    } else {
      $(randomizeField).attr('checked', false);
    }

    var alwaysCorrectField = $(fld).find('input.fld-always_correct');

    if ($(alwaysCorrectField).val() === 'on'){
      $(alwaysCorrectField).attr('checked', true);
    } else {
      $(alwaysCorrectField).attr('checked', false);
    }
  }

Then I added the function to the onAdd event

typeUserEvents: {
  'radio-group': {
    onadd: function (fld) {
      fixCheckedProps(fld);
    }
  },
}

Let me know if something isn’t clear or if I forgot something, and I can always elaborate a bit more!

[kevinchappell]

@alexsergeibichy you can use the same pattern but need to add a value to the color picker config. https://codepen.io/kevinchappell/pen/gObEKEj