Checkbox 多选框

一组备选项中进行多选

基础用法

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。

在组件中定义 model 绑定变量， 单一使用组件时，默认绑定变量的值会是 Boolean，选中为 true

<!-- 'checked' 为 true 或 false -->
<el-checkbox [model]="val" (modelChange)="handle($event)">备选项</el-checkbox>

禁用状态

多选框不可用状态。

设置 elDisabled 属性即可

<el-checkbox [model]="checked1" [elDisabled]="true">备选项1</el-checkbox>
<el-checkbox [model]="checked2" [elDisabled]="true">备选项2</el-checkbox>

多选框组

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

label 与数组中的元素值相对应， 如果存在指定的值则为选中状态，否则为不选中。

<!--当组件中无值时，label 属性的值也会用于显示-->
<el-checkbox-group [model]="['复选框 B', '选中且禁用']" (modelChange)="handle($event)">
  <el-checkbox label="复选框 A"></el-checkbox>
  <el-checkbox label="复选框 B">复选框 F</el-checkbox>
  <el-checkbox label="复选框 C"></el-checkbox>
  <el-checkbox label="禁用" [elDisabled]="true"></el-checkbox>
  <el-checkbox label="选中且禁用" [elDisabled]="true"></el-checkbox>
</el-checkbox-group>

可选项目数量的限制

使用 min 和 max 属性能够限制可以被勾选的项目的数量。

<!--min 与 [min] 并不是等价的，具体请参见 Angular 官方文档-->
<el-checkbox-group [model]="['Java', 'TypeScript']" [min]="1" max="2">
  <el-checkbox label="Java"></el-checkbox>
  <el-checkbox label=".NET">复选框 F</el-checkbox>
  <el-checkbox label="C++"></el-checkbox>
  <el-checkbox label="JavaScript" [elDisabled]="true"></el-checkbox>
  <el-checkbox label="TypeScript" [elDisabled]="true"></el-checkbox>
</el-checkbox-group>

按钮样式

按钮样式的多选组合。

组件还提供了 size 属性， 支持 large 和 small 两种。

<div style="margin: 15px 0;"></div>
<el-checkbox-group [model]="['Java', 'TypeScript', 'Swift']" notes=" ">
  <el-checkbox-button *ngFor="let city of ['Hello', 'TypeScript', 'CSS']"
    [label]="city"></el-checkbox-button>
</el-checkbox-group>
<div style="margin: 15px 0;"></div>
<el-checkbox-group [model]="['Hegel', 'Aristotle', 'Dewey']" size="small">
  <el-checkbox-button *ngFor="let man of ['Hegel', 'Aristotle', 'Dewey']"
    [label]="man" [elDisabled]="man === 'Aristotle'">{{man}}</el-checkbox-button>
</el-checkbox-group>

Checkbox Attributes

Checkbox-group Attributes