单击复选框时如何禁用 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 materialize 和 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

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

一个解决方案是创建一个名为 disabled

的简单 CSS class

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

在你的 HTML 中：

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

Answer 2

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

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

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

ts

toShow = true;

单击复选框时如何禁用 div

how to disable a div when a checkbox is clicked

typescript

angular-material

aurelia