启用选中复选框以检查循环内部

Question

我正在处理一项需要将​​优先级与每个项目相关联的要求。

该项是Checkbox元素。 选中一项应仅启用其下方的“选择”。此选择中包含数字以分配优先级。

喜欢-

只有选中该条件的复选框才启用此条件。

下面是我想出的代码，以便可以动态创建这些控件。

<div class="panel-body">
  <div *ngFor="let wt of Wts; let i=index">
    <input type="checkbox" [(ngModel)]="wt.ischecked" name="rdWt" (change)="changeforSelectedWt(wt)" />{{wt.Name}}
    <br/>
    <u>Current Priority</u> : {{currentPriority}}
    <select class="form-control" (change)="priorityChanged(selectedPriority)" style="width:200px">
      <option value="0">Select New Priority</option>
      <option *ngFor="let wt of Wts; let priority=index">
        {{priority + 1}}
      </option>
    </select>
  </div>
</div>

复选框的更改事件如下

changeforSelectedWt(data) {
  //debugger;
  console.log('event data is---', data);
  this.spinner.show();
  this.Wts.forEach(x => {
    // debugger;
    if (x.ischecked == true) {
      debugger;
      console.log(x);
    }
    this.spinner.hide();
  });
}

我如何才能确保仅当我选中任何复选框时，其下方的“选择”应该获得启用，其余保持禁用。 我还需要复选框的值和select中的值。

这种方法真的可行吗？还是需要在html中创建个人控件。