当勾选复选框时启用选择字段

在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); 
     } 
    }); 
    } 

}

来源

2017-02-16 Red Virus

您可以将增加价值的禁用参数：

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

来源

2017-02-16 15:46:37

当勾选复选框时启用选择字段

回答

相关问题