Question

在forloop中，我有复选框和选择字段。默认情况下，选择字段为disabled。每当用户检查复选框时，相应的选择字段将为enabled。

以下是我目前正在使用的代码。

home.html的

<ion-grid>
        <ion-row *ngFor="let item of extras" id="booking-enhancements-wrap-{{ item.id }}">
            <ion-col width-10>
                <ion-checkbox (ionChange)="onChange()" [(ngModel)]="enhancements[item.id].checked" ng-checked="enhancements[item.id].checked"></ion-checkbox>
            </ion-col>
            <ion-col width-70>{{ item.name }}</ion-col>
            <ion-col width-20>
                <select [(ngModel)]="enhancements[item.id].qty" class="qty" disabled>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
            </ion-col>
        </ion-row>=
    </ion-grid>

home.ts

export class HomePage {

  extras: any;
  enhancements: any;

  constructor(public navCtrl: NavController, public http: Http) {
    this.http.get('https://www.example.com/hotels/11/').map(res => res.json()).subscribe(response => {
        this.extras = response.Extras;
        this.enhancements = {};
        this.extras.forEach(item => {
          this.enhancements[item.id] = { checked: false, qty: 1 };
        })
    });
  }

  onChange(){
    var enhancements = this.enhancements;
    Object.keys(enhancements).forEach(function(key){
      if( enhancements[key].checked == true && enhancements[key].qty > 0 ){
        console.log( key + " | " + enhancements[key].checked );
      }
    });
  }

}

Answer 1

您可以为禁用参数添加值：

disabled="enhancements[item.id].checked"

选中复选框时启用选择字段

1 个答案: