使用 Angular2 启用/禁用复选框字段

Posted 2023-03-13

【中文标题】使用 Angular2 启用/禁用复选框字段

【英文标题】：Enabling/Disabling checkbox field with Angular2

【发布时间】：2017-04-20 17:23:16

【问题描述】：

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

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

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

这是我的模板 sn-p:

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

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

 < select *ngIf="subattribute.name == 'Email' && subattribute.type == 'LIST'" id="subattribute.nameCheck" 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>

checkbox 生成的 id 是：InformationCheck，combobox 是：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);
    

【参考方案1】：

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

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

【讨论】：

我能够解决它。代码运行良好，唯一的问题是 DOM 树中存在重复元素。

什么重复元素？你的意思是多个选择元素？会导致什么问题？

不，一个元素动态获取的 ID 与另一个元素重复。

你在说id="subattribute.nameCheck"吗？

我不知道。如果name 对于每个`子属性都不同，则不应有重复。