j-Checkboxlist

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

За персонализиран дизайн можете да използвате j-CheckboxListExpert
Подкрепа за DarkMode

Конфигуриране:

required {Boolean} (опционално) позволява "необходими" (предварително: false)
items {String} (опционални) статични елементи key1|value1, key2 with value, key3|value
icon {String} (опционална) икона за етикет без fa- например home, cog, и т.н.
checkicon {String} (опционално) икона за проверка без fa-, (предварително: check).
label {String} (опционално) етикет (дефолтът е HTML съдържание)
type {String} (опционално) може да бъде number (преобразува стойностите на String в Number)
datasource {String} път към източника на данни (може да бъде изтеглено)
text {String} определя име на собствеността за текст (в източник на данни), по подразбиране: name
value {String} определя име на имота за стойност (в източник на данни) по подразбиране :id
empty {String} (опционален) празен текст за празен източник на данни
disabled {Boolean} (опционално) деактивира този компонент

Използвайте го с <ui-component name="checkboxlist">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на MIT.

example.html

<div class="container">
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<ui-component name="checkboxlist" path="selected" config="datasource:datasource;class:.col-sm-2;type:number">Frameworks</ui-component>
		</div>
	</div>
	<br />
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<ui-component name="checkboxlist" path="selected" config="icon:home;required:true;items:Total.js|1,jComponent|2,Express.js|3,React|4,Angular.js|5;class:.col-sm-2;type:number">Frameworks</ui-component>
		</div>
	</div>
</div>

<script>
	var selected = [1, 2];
	var datasource = [{ id: 1, name: 'Total.js' }, { id: 2, name: 'jComponent' }, { id: 3, name: 'Express.js' }, { id: 4, name: 'React' }, { id: 5, name: 'Angular.js' }];
</script>