web-dev-qa-db-ja.com

Angular2、チェックボックスが選択されていない場合はボタンを無効にする

複数のチェックボックスと、少なくとも1つのチェックボックスが選択されている場合にのみ有効にする必要があるボタンがあります

<input type="checkbox">VALUE1
<input type="checkbox">VALUE2
<input type="checkbox">VALUE3
<input type="checkbox">VALUE4
<button>Proceed</button>

これはAngular2を使用してどのように達成されますか。

追伸：同様の質問が見つかりましたが、Angular2は使用していません

checkboxangular
21
Khaled

1つの方法は、各チェックボックスでngModelを使用し、各チェックボックスモデルの状態を調べるメソッドを介してボタンのdisabledプロパティを制御することです。

@Component({
  template: `
    <label *ngFor="let cb of checkboxes">
      <input type="checkbox" [(ngModel)]="cb.state">{{cb.label}}
    </label>
    <p><button [disabled]="buttonState()">button</button>
  `
})
class App {
  checkboxes = [{label: 'one'},{label: 'two'}];
  constructor() {}
  buttonState() {
    return !this.checkboxes.some(_ => _.state);
  }
}

Plunker

43
Mark Rajcok

次のようにプロパティを使用[無効]します。

<input type="checkbox" [(ng-model)]="disableButton1"> VALUE1
<input type="checkbox" [(ng-model)]="disableButton2"> VALUE1
<input type="checkbox" [(ng-model)]="disableButton3"> VALUE1
<input type="checkbox" [(ng-model)]="disableButton4"> VALUE1
<button type="button" [disabled]="disableButton || disableButton2">Submit</button>
9
Emir Marques

チェックボックスの変更イベントで$ eventを使用して、任意のアクションを実行できます。

サンプル：

[〜＃〜] html [〜＃〜]

<input type="checkbox" (change)="changeEvent($event)" />
<button [disabled]="toogleBool">button</button>

[〜＃〜] ts [〜＃〜]

 toggleBool: boolean=true;

 changeEvent(event) {
        if (event.target.checked) {
            this.toggleBool= false;
        }
        else {
            this.toggleBool= true;
        }
    }
1
Tk1993

プロジェクトで同じ問題に直面し、解決しました。

サンプル：

[〜＃〜] html [〜＃〜]

<table class="table">
<thead>
    <tr>
        <th>Select</th>
        <th>Name</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let item of items">
        <td><input type="checkbox" [(ngModel)]="item.chosen"></td>
        <td>{{item.name}}</td>
    </tr>
</tbody>
</table>
<button [disabled]="noneSelcted()">OK</button>

[〜＃〜] ts [〜＃〜]

import {Componnet} from '@angular/core'

@Componnet({
    selector: 'my-test',
    templateUrl: 'app/home/test.component.html'
})

export class TestComponent{
    items = [
        { name: 'user1', chosen: false},
        { name: 'user2', chosen: false},
        { name: 'user3', chosen: false},
    ];

    noneSelected(){
        return !this.items.some(item => item.chosen);
    }
}
0
Neel Patel