Angular4_动态启用禁用select
原创
©著作权归作者所有:来自51CTO博客作者Hello_Martin的原创作品,请联系作者获取转载授权,否则将追究法律责任
<select class="form-control customSelect" [(ngModel)]="packagingType" [ngClass]="{'disableSelect' : isBulkToteMaterial}" name="packagingType" (change)="packagTypeChange(packagingtype.value)" #packagingtype tabindex="-1">
<option *ngFor="let type of packagingTypes" value="{{type.value}}">
{{type.key}}
</option>
</select>
css
.disableSelect{
pointer-events: none;
}
pointer-events
CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。
tabindex="-1" 是搞掉键盘按tab 能触发事件的情况
/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
当此属性未指定时,visiblePainted
值的相同特征适用于 SVG 内容。
除了指示该元素不是鼠标事件的目标之外,值none
表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
初始值 | auto |
适用元素
| all elements
|
是否是继承属性 | yes
|
适用媒体
| visual
|
计算值 | as specified
|
Animation type
| discrete
|
正规顺序
| the unique non-ambiguous order defined by the formal grammar
|