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

Posted 2023-03-05

【中文标题】Angular2，如果没有选中复选框，则禁用按钮

【英文标题】：Angular2, disable button if no checkbox selected

【发布时间】：2016-03-12 11:38:48

【问题描述】：

我有多个复选框和一个按钮，只有在至少选择了一个复选框时才能启用该按钮

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

这是如何使用 Angular2 实现的。

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

【问题讨论】：

试试这个：*ng-if=""

【参考方案1】：

使用属性[禁用]作为：

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

【讨论】：

谢谢，虽然它可以工作，有多个复选框，如果一个被选中，它最终会全选

更新我的例子。现在看

这在静态代码的情况下非常有效，但是当复选框被动态创建时，比如使用*ng-for，也许唯一的选项是使用基于选定复选框计数分配的布尔变量。

【参考方案2】：

一种方法是在每个复选框上使用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

【讨论】：

欣赏给出的答案。知道为什么 buttonState 函数会被多次触发吗？以及如何避免多次触发？

每次 Angular 认为合适时都会进行表达式插值（组件中发生了一些事情，Angular 启动了它的变化检测算法来更新 2way 绑定变量）

只有在所有 checkboes 都被选中的情况下，你会怎么做？

@Harry, return !this.checkboxes.every(_ => _.state);

@MarkRajcok 使用此行时出现错误return !this.checkboxes.some(_ => _.state);

【参考方案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;
        
    

【参考方案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);