时间戳

首页 > 解决方案 > 单击复选框时如何禁用div

typescript - 单击复选框时如何禁用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中我可以获取元素并禁用它。我不知道如何在 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>

但它什么也没做

标签： typescriptangular-materialaurelia

解决方案

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

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

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

在您的 HTML 中：

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

推荐阅读