Question

我有多个复选框和一个按钮，只有在选中至少一个复选框时才需要启用该按钮

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

如何使用Angular2实现这一目标。

P.S：发现了类似的问题，但没有使用Angular2。

Answer 1

一种方法是在每个复选框上使用class Node { public: intrusive::node<Node> link0; intrusive::node<Node> link1; int n; Node(int n): n(n) {} }; std::ostream& operator<< (std::ostream& out, Node const& n) { return out << n.n; } int main() { intrusive::list<Node, &Node::link0> l0; intrusive::list<Node, &Node::link1> l1; Node n[] = { 10, 11, 12, 13, 14, 15 }; l0.push_front(n[0]); l0.push_front(n[1]); l0.push_front(n[2]); l1.push_back(n[0]); l1.push_back(n[1]); l1.push_back(n[2]); std::cout << "l0=" << l0 << " l1=" << l1 << "\n"; }，然后通过检查每个复选框模型状态的方法控制按钮的ngModel属性：

disabled

Plunker

Answer 2

使用属性[禁用]：

<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>

Answer 3

您可以在复选框的更改事件中使用$ 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;
        }
    }

Answer 4

我在项目中遇到了同样的问题，我解决了。

示例：

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

Angular2，如果未选中复选框，则禁用按钮

4 个答案: