如何在单击复选框时禁用div

Question

我有以下复选框

<md-checkbox checked.bind="addEventCommand.allDay" change.delegate="allday()">All Day</md-checkbox>

当上述情况成立时，我想禁用下面的div

<div class="row" >
<md-input label="Start DateTime" value.bind="addEventCommand.startTime" ></md-input> 
<md-input label="End DateTime" value.bind="addEventCommand.endTime"></md-input>
</div>

我知道在javascript中我可以获取元素并禁用它。我不知道如何在angular实体化和typescript 中做到这一点

我已将此添加到我的打字脚本中

allday() {
if (this.addEventCommand.allDay === true) {

}

}

我试过这个

<md-checkbox  ref="addEventCommand.allDay.check"checked.bind="addEventCommand.allDay" >All Day</md-checkbox>

在div上，我尝试了

<div class="row" disabled.bind="addEventCommand.allDay.check.checked"></div>

但它什么都不做

Answer 1

将ngModel添加到复选框，然后使用ngIf 隐藏该复选框

<div *ngIf="toShow"> 
My content
</div>
<input type="checkbox" [(ngModel)]="toShow">

ts

toShow = true;

Answer 2

Input元素有一个禁用的属性，如复选框、文本输入等。div元素不是输入元素，因此它没有禁用的属性。

一个解决方案是创建一个名为disabled 的简单CSS类

.disabled {
background: gray;
pointer-events: none;
}

在您的HTML:中

<div class="row" [class.disabled]="addEventCommand.allDay.check.checked"></div>