Question

我有一个简单的组件，其中有一个包含CheckAll复选框的表，然后每个表行包含该单独行的复选框。

有一些条件会禁止选择某行，并使用特定行上的[disabled]指令反映这一点。

这会禁用单个行，但是，我的check all框仍在选中这些已禁用的rows。

HTML：

<table class="table table-condensed" *ngIf="importResults?.length > 0">
         <thead>
            <tr>
               <th><input type="checkbox" name="checkAll" [(ngModel)]="checkedAll" (ngModelChange)="toggleAllEmployees($event)"></th>
               <th>Name</th>
            </tr>
         </thead>
        <tbody>
            <tr *ngFor="let i of importResults" >
                <td>
                    <input type="checkbox"
                            id="checkbox_{{ i.QID }}"
                            [checked]="i.checked"
                            (click)="toggleSelectedEmployee(i)"
                            [(ngModel)]="i.checked" 
                            [disabled] = "i.OnTempAssignment == 'True'"
                            />
                </td>
                <td>{{ i.PreferredName }} {{ i.LastName }}</td>
            </tr>
         </tbody>
      </table>

组件：

    /**
     * Toggle all employees (checked/unchecked) in step 2.
     *
     * @param {any} flag
     * @memberof EmployeeSelectionComponent
     */
    toggleAllEmployees(flag) {
        if (flag) {
            for (let i = 0; i < this.importResults.length; i++) {
                    this.importResults[i].checked = true;
            }
            this.employeeSelection = this.importResults;
            // Emit our changes
            this.selectedEmployees.emit(this.employeeSelection);
        } else {
            for (let i = 0; i < this.importResults.length; i++) {
                this.importResults[i].checked = false;
                this.employeeSelection = [];
                // Emit our changes
                this.selectedEmployees.emit(this.employeeSelection);
            }
        }
    }

我的问题：

如何使check all复选框忽略（不检查）任何已禁用的复选框？

Answer 1

已禁用可能会阻止用户更改复选框的状态，但您正在更改代码中的基础模型。如果您想允许它，您需要签入为每个项目设置值的代码...

for (let i = 0; i < this.importResults.length; i++) {
        if (this.importResults[i].OnTempAssignment !== 'True') {
            this.importResults[i].checked = true;
        }
}

此外，您使用事件调用您的方法：toggleAllEmployees($event)，而不是标志。这总是一个真正的价值，对吧？我认为您需要检查'checkedAll'或$event.target.value的值，而不是flag参数。

Angular2 - Check-All框选择禁用的输入

1 个答案: