如何禁用切换按钮？ [解决了]

Question

我想在禁用的HTML中显示切换按钮。

我的按钮代码：

Reconstitutes SQL statements

我尝试放<td > <div class="toggle" [class.on]="isActive" (click)="function(no)"> <div class="toggle-btn"></div> </div> </td>

disabled

和

<div class="toggle" [class.on]="isActive" (click)="function(no) disabled">

但是它不起作用。有解决方案吗？

Answer 1

在HTML中使用ngClass：

<button type="button" [ngClass]="{'disabled-btn': isDisabled}">Submit</button>

ts文件，管理isDisabled变量：

this.isDisabled = true;

在CSS中，将样式添加到Disabled-btn类：

.disabled-btn {
      pointer-events: none;
      opacity: 0.3;
}

Answer 2

您应该使用html <button>而不是<div>，因为button标签上具有disabled属性。您甚至可以绑定禁用的属性。

<button type="button" class="toggle" (click)="function(no)" [disabled]="isDisabled">Submit</button>

在component.ts上，可以通过将禁用的属性设置为true或false来简单地切换。

this.isDisabled = true; // disables button

或者，如果您打算将disabled属性绑定到任何属性，仍然可以通过使用Document.querySelector()来获取元素，以动态禁用按钮，然后将Disabled属性设置为true。

const button = document.querySelector('.button');
button['disabled'] = true;

Answer 3

使用此

<button type="button" [disabled]="true">Submit</button >

Answer 4

我通过添加CSS找到了自己的解决方案

  

pointer-events：none