Enabling/Disabling Angular2 的复选框字段

Question

我正在动态呈现复选框和组合框字段并执行以下功能：

根据 API 响应，如果复选框字段显示为 selected，则组合框显示为启用，否则它将被禁用。
如果用户 select 复选框字段，则组合框应启用，否则禁用

组合框字段适用于第一种情况，但不适用于第二种情况。状态（启用或禁用）以后无法更改。

这是我的模板片段：

 < tr *ngFor="let widgetAttribute of _preferencesWidget">

 < td *ngFor="let subattribute of widgetAttribute.methods">

 < select *ngIf="subattribute.name == 'Email' && subattribute.type == 'LIST'" id="{{subattribute.name}}Check" class="selectpicker" data-max-options="1" (change)="validateCombo($event)"
                                                            [disabled]="!subattribute.enabled">
                                                                <option *ngFor="let subValue of subattribute.values" value="{{subValue.code}}" [selected]="subValue.code == subattribute.selected">{{subValue.description}}< /option>
                                                            < /select>
 < /td>
< /tr>

The generated id for checkbox is : InformationCheck and for combobox is : pensionMCheck

我的组件逻辑是：

 public validateCombo() {

     if (this.pensionCheck) {
         $('#pensionMCheck').prop('disabled', false);
         if ($('#pensionMCheck').val() === 'Y') {
             this.pensionMCheck = true;
         } else {
             this.pensionMCheck = false;
         }
    } else {
         this.pensionMCheck = false;
         $('#pensionMCheck').val('N');
         $('#pensionMCheck').prop('disabled', true);
         $('#pensionMCheck').prop('selectedIndex', 0);
    }

Answer 1

将复选框状态绑定到属性 (isChecked) 并将 enabled of <select> 绑定到相同的属性:

<input type="checkbox" [(ngModel)]="isChecked">
<select [(ngModel)]="selectedItem" [enabled]="!isChecked"

Enabling/Disabling Angular2 的复选框字段

Enabling/Disabling checkbox field with Angular2

jquery

angular2-forms

angular