New to Telerik UI for ASP.NET Core? Download free 30-day trial

ASP.NET Core CheckBoxGroup API

Loading Demo...

EXAMPLE

VIEW SOURCE
EDIT IN
- Telerik REPL

Also available for:

var checkBoxGroupPrevState; window.demoComponentProperties = { sections: [ { label: 'Enable / Disable CheckBoxGroup', controls: [ { type: 'segmented', name: 'state', options: [{ value: 'enabled', label: 'Enable' }, { value: 'disabled', label: 'Disable' }], defaultValue: 'enabled' } ] }, { label: 'Enable Item', controls: [ { type: 'numericTextBox', name: 'enableIndex', label: 'Enable Item Index', defaultValue: 0, min: 0, max: 4 }, { type: 'button', label: 'Enable Item', onClick: function (values) { $('#checkboxgroup').data('kendoCheckBoxGroup').enableItem(true, values.enableIndex); } } ] }, { label: 'Disable Item', controls: [ { type: 'numericTextBox', name: 'disableIndex', label: 'Disable Item Index', defaultValue: 0, min: 0, max: 4 }, { type: 'button', label: 'Disable Item', onClick: function (values) { $('#checkboxgroup').data('kendoCheckBoxGroup').enableItem(false, values.disableIndex); } } ] }, { label: 'Get Items', controls: [ { type: 'numericTextBox', name: 'itemIndex', label: 'Item Index', defaultValue: 0, min: 0, max: 4 }, { type: 'button', label: 'Get Item', onClick: function (values) { var item = $('#checkboxgroup').data('kendoCheckBoxGroup').item(values.itemIndex); $('#dialog').data('kendoDialog').content('Item at index: ' + values.itemIndex + ' Value: ' + $(item[0]).val()).open(); } }, { type: 'button', label: 'Get All Values', onClick: function () { var items = $('#checkboxgroup').data('kendoCheckBoxGroup').items(); var texts = []; for (var i = 0; i < items.length; i++) { texts.push($(items[i]).val()); } $('#dialog').data('kendoDialog').content('CheckBoxGroup values:' + texts).open(); } } ] }, { label: 'Get / Set Value', controls: [ { type: 'textbox', name: 'value', label: 'Value', defaultValue: '1', placeholder: 'Value' }, { type: 'button', label: 'Set Value', onClick: function (values) { $('#checkboxgroup').data('kendoCheckBoxGroup').value(values.value); } }, { type: 'button', label: 'Get Value', onClick: function () { var checkBoxGroup = $('#checkboxgroup').data('kendoCheckBoxGroup'); $('#dialog').data('kendoDialog').content('CheckBoxGroup value:' + checkBoxGroup.value()).open(); } } ] } ], onChange: function (values) { var checkBoxGroup = $('#checkboxgroup').data('kendoCheckBoxGroup'); if (checkBoxGroup && values.state !== checkBoxGroupPrevState) { checkBoxGroupPrevState = values.state; checkBoxGroup.enable(values.state === 'enabled'); } } }; Select country:

.label { font: normal 14px/16px Metric, Arial, Helvetica, sans-serif; color: #656565; display: inline-block; text-transform: uppercase; margin-bottom: 10px; } .k-form-hint { margin-top: 10px; }

ASP.NET Core CheckBoxGroup API

Support & Learning Resources

Additional Resources