单击复选框时如何禁用div

问题描述

我有以下复选框

<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中我只能获取元素并将其禁用。我不确定如何在角度实现和打字稿中做到这一点

我已将此添加到我的打字稿中

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>

但是它什么也没做

解决方法

输入元素具有禁用属性，例如复选框，文本输入等。Div元素不是输入元素，因此它没有禁用属性。

一种解决方案是创建一个简单的CSS类，命名为Disabled

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

在您的HTML中：

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

,

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

<div *ngIf="toShow"> 
My content
</div>

<input type="checkbox" [(ngModel)]="toShow">

ts

toShow = true;