Html 如何在单击时启用项目

我的对话框容器中有一个子部分列表。我正在尝试在对话框打开时禁用所有选项，并在铅笔图标单击该分区时仅启用选定分区

例如

当用户单击第1小节铅笔图标时

第1款启用

第2款残疾人

第3款残疾人

第2小节和第3小节的流程相同。任何建议或帮助都将不胜感激

<p class="substyle">Subsections</p>
<div class="substyle" *ngFor="let subsection of section.subSections">
  <mat-form-field appearance="fill">
       <input matInput(ngModelChange)="nameChanged({newValue: $event, 
        isSection: false, id: subsection.id} 
        [(ngModel)]="subsection.sectionName">
   </mat-form-field>

<button mat-icon-button color="primary" 
    (click)="editDoc(subsection)"> <mat-icon>edit</mat-icon>
</button>

<button mat-icon-button (click)="openConfirmDialog(subsection, false)" 
    *ngIf="isSubsection"><mat-icon>delete</mat-icon>
</button>
                               

---

你可以试试这样的东西

在

输入中

将

[disabled]

属性绑定到

布尔值

，如下所示：

<p class="substyle">Subsections</p>
<div class="substyle" *ngFor="let subsection of section.subSections">
  <mat-form-field appearance="fill">
       <input [disabled] = "subsection.id !== selectedId" matInput style="width: 200px; height: 15px;" type="text"
       (ngModelChange)="nameChanged({newValue: $event, isSection: false, id: subsection.id})"
       [(ngModel)]="subsection.sectionName">
   </mat-form-field>

<button mat-icon-button color="primary" matTooltip="Edit documents for this Subsection"
   style="bottom: 10px;" (click)="editDoc(subsection)"> <mat-icon>edit</mat-icon>
</button>

<button mat-icon-button color="primary" matTooltip="Delete this 
    Subsection" (click)="openConfirmDialog(subsection, false)" 
    style="bottom: 10px;" *ngIf="isSubsection"><mat-icon>delete</mat-icon>
</button>

---

因此，无论何时设置selectedId，它都会自动将不属于所选分区的所有输入设置为禁用。

每个分区是否都有一个id或与之相关的唯一内容？您好，DJ，是。。每个小节都有唯一的id，但它们有相同的SectionId/ParentId（图片更新，还有代码）。

<p class="substyle">Subsections</p>
<div class="substyle" *ngFor="let subsection of section.subSections">
  <mat-form-field appearance="fill">
       <input [disabled] = "subsection.id !== selectedId" matInput style="width: 200px; height: 15px;" type="text"
       (ngModelChange)="nameChanged({newValue: $event, isSection: false, id: subsection.id})"
       [(ngModel)]="subsection.sectionName">
   </mat-form-field>

<button mat-icon-button color="primary" matTooltip="Edit documents for this Subsection"
   style="bottom: 10px;" (click)="editDoc(subsection)"> <mat-icon>edit</mat-icon>
</button>

<button mat-icon-button color="primary" matTooltip="Delete this 
    Subsection" (click)="openConfirmDialog(subsection, false)" 
    style="bottom: 10px;" *ngIf="isSubsection"><mat-icon>delete</mat-icon>
</button>

  editDoc(value) {
    // make sure you make selectedId a property before doing this
    this.selectedId = value.id  // set the selectedId property to the selected value id
    this.subsectionToEdit = value;
    this.refreshEditor = false;
  }