typeUserAttrs, doesn't render checkbox checked property correctly
See original GitHub issueDescription:
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)
![screen shot 2017-08-04 at 5 23 10 pm](https://user-images.githubusercontent.com/16531276/28975245-a65a4794-7939-11e7-9f71-af092c9b8985.png)
Issue Analytics
- State:
- Created 6 years ago
- Comments:15 (3 by maintainers)
Top Results From Across the Web
Why do not render checkboxes with checked attribute true vuejs
The code works correctly if I remove the v-model. Why is this happening? <input type="checkbox" :value="permiso.id" class= ...
Read more >jQuery Plugin For Online Drag & Drop Form Builder
5, <!-- Render form templates created with formBuilder --> ... Fixed: typeUserAttrs, doesn't render checkbox checked property correctly.
Read more >Checkbox lightning:input doesn't update Boolean attribute
Update! So I finally found a way to make this work. I added a event to my controller to read the value of...
Read more >checked - CSS: Cascading Style Sheets - MDN Web Docs
Toggling elements with a hidden checkbox. This example utilizes the :checked pseudo-class to let the user toggle content based on the state of...
Read more >react Input checkbox does does not reflect provided value
The last issue was to set a proper id. I does not work without. To sum it up: In order to use checkboxes...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@AvKhushbu of course!
First I added the attributes to the type as below:
Then I created a function to check what the property was equal to and add the checked property accordingly
Then I added the function to the onAdd event
Let me know if something isn’t clear or if I forgot something, and I can always elaborate a bit more!
@alexsergeibichy you can use the same pattern but need to add a
value
to the color picker config. https://codepen.io/kevinchappell/pen/gObEKEj