Question

试图找到一些例子，但是我似乎只找到AngularJs例子。

是否可以在选中同一行中的textbox时启用我的checkbox，而无需将复选框绑定到boolean值，并且将该值绑定到我的`textbox' ，还是不需要编写一些Javascript？

<ng-container *ngIf="showRowTextBox">
        <td>
          <input type="text" placeholder="Enter text here" disabled onfocusout="onTextBoxFocusOut(row)"/>
        </td>
        <td>
          <input type="checkbox" />
        </td>
      </ng-container>

作为参考，这是整个表格的布局：

<table *ngIf="hasData" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th #tableBody *ngFor="let column of columns">
        {{ column }}
      </th>
      <th *ngFor="let buttonColumnName of buttonColumnNames">
      </th>

      <ng-container *ngIf="showRowTextBox">
          <th>{{ textBoxColumnName }}</th>
          <th>{{ checkBoxColumnName }}</th>
      </ng-container>

    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of model">
      <ng-container *ngFor="let columnDataName of columnDataNames">
        <td *ngIf="modelConfig[columnDataName] && modelConfig[columnDataName].isVisible">
          <ng-container *ngIf="modelConfig[columnDataName].isDate;">
            {{ row[columnDataName] | date:'d MMM yyyy' }}
          </ng-container>
          <ng-container *ngIf="modelConfig[columnDataName].isBoolean;">
            <tfg-toggle onText="Yes" offText="No" [disabled]="true" [value]="row[columnDataName]"></tfg-toggle>
          </ng-container>
          <ng-container *ngIf="!modelConfig[columnDataName].isBoolean && !modelConfig[columnDataName].isDate">
            {{ row[columnDataName] }}
          </ng-container>
        </td>
      </ng-container>
      <td *ngFor="let buttonColumnName of buttonColumnNames">
        <button (click)="executeButtonFunction(row[primaryKeyColumnName], buttonColumnName)" class="btn" [ngClass]="buttonColumnName === 'Delete' ? 'btn-danger' : 'btn-primary'">{{buttonColumnName}}</button>
      </td>
      <ng-container *ngIf="showRowTextBox">
        <td>
          <input type="text" placeholder="Enter text here" disabled  onfocusout="onTextBoxFocusOut(row)"/>
        </td>
        <td>
          <input type="checkbox"/>
        </td>
      </ng-container>
    </tr>
  </tbody>
</table>

Answer 1

您可以借助template reference variable将文本输入的disabled属性绑定到复选框状态。为了使绑定生效，还应将ngModel指令应用于复选框。

<ng-container *ngIf="showRowTextBox">
  <td>
    <input type="text" [disabled]="!chkEnable.checked" ... />
  </td>
  <td>
    <input #chkEnable ngModel type="checkbox" />
  </td>
</ng-container>

有关演示，请参见this stackblitz。

如果复选框选中角6，则启用文本框

1 个答案: