Angular Ngif规则禁用复选框

Question

我正在寻找禁用bool ReadOnlyStyleGuideNotes复选框的最佳方法。

<div class="checkbox checkbox-inline">
  <input 
    id="cb_note_{{note.Id}}" 
    type="checkbox" 
    (change)="toggleNoteState(note)" 
    [checked]="isNoteChecked(note)">
  <label attr.for="cb_note_{{note.Id}}"></label>
</div>

尝试类似的操作，但是编辑文本无效，并且仍然可以取消选中复选框。

<div class="checkbox checkbox-inline">
input id="cb_note_{{note.Id}}" type="checkbox" 
(change)="toggleNoteState(note)" 
[checked]="isNoteChecked(note)"
[disabled]="readOnlyStyleGuideNotes">
<label attr.for="cb_note_{{note.Id}}"></label>
</div>

ts代码

private readOnlyStyleGuideNotes: boolean; 


        ngOnInit() {
            this.readOnlyStyleGuideNotes = this.context.readOnlyStyleGuideNotes();
        }


     public readOnlyStyleGuideNotes(): boolean {
            return this.getContext().ReadOnlyStyleGuideNotes;
        }

Answer 1

您已禁用文字。如果要隐藏它，请使用[hidden]="ReadOnlyStyleGuideNotes"。或者，如果您希望将其从DOM中完全删除，请使用*ngIf="!ReadOnlyStyleGuideNotes"

<label attr.for="cb_note_{{note.Id}}" *ngIf="!ReadOnlyStyleGuideNotes"></label>

Answer 2

  

只需在html中进行一些小的更正。将ng-disabled更改为Disabled，然后在不在标签中的复选框中使用此Disabled属性。

<input id="cb_note_{{note.Id}}" type="checkbox" 
(change)="toggleNoteState(note)" 
[disabled]="ReadOnlyStyleGuideNotes" 
[checked]="isNoteChecked(note)">

下面是进行的更改-

1. 添加了属性[disabled]
2. 将ReadOnlyStyleGuideNotes == 'True'更改为ReadOnlyStyleGuideNotes
3. 从标签中删除ng-disabled。

Answer 3

我不确定您为什么同时使用AngularJS（1.x）和Angular（2+）语法。 ng-disabled是AngularJS上的指令。因此它将无法在Angular上使用。

此外，您不能禁用label标签。它仅适用于input标签。

最后，由于ReadOnlyStyleGuideNotes是boolean，因此您可以简单地使用[disabled]="ReadOnlyStyleGuideNotes"来禁用输入。

<input 
  id="cb_note_{{note.Id}}" 
  type="checkbox" 
  (change)="toggleNoteState(note)" 
  [checked]="isNoteChecked(note)"
  [disabled]="ReadOnlyStyleGuideNotes">

我很确定这是不需要的。但是以防万一，这里有一个Sample StackBlitz供您参考。