Javascript 取消选中一个复选框，该复选框在Angular 5中被选中并冻结_Javascript_Angular_Checkbox_Html Table

Javascript 取消选中一个复选框，该复选框在Angular 5中被选中并冻结

javascript angular checkbox

Javascript 取消选中一个复选框，该复选框在Angular 5中被选中并冻结,javascript,angular,checkbox,html-table,Javascript,Angular,Checkbox,Html Table,我有一个迭代JSON值的表，在第一列中有复选框要求：选择5个复选框时，用户不能选择第6个复选框，但可以取消选择5个复选框中的任何复选框当前场景：当用户选择5个复选框时，我可以冻结复选框，但它不允许我取消选择所选复选框 <checkbox [forbidden]="isFull() && !Selected" [ngModel]="Selected" (ngModelChange)="Change(Result, $event)"></checkbox>

我有一个迭代JSON值的表，在第一列中有复选框

要求：选择5个复选框时，用户不能选择第6个复选框，但可以取消选择5个复选框中的任何复选框

当前场景：当用户选择5个复选框时，我可以冻结复选框，但它不允许我取消选择所选复选框

<checkbox [forbidden]="isFull() && !Selected" [ngModel]="Selected" (ngModelChange)="Change(Result, $event)"></checkbox>

请提供一个工作plunker或任何在线编辑器，以便更好地理解

“提前感谢”

不应该被“isFull（）&&！Selected”？因为您想冻结未选中的，但仍然可以取消选中的。

希望这对您有所帮助！，您可以根据需要对此进行优化和修改

工作样本

模板文件：

 template: `
          <ul>
            <ng-container>
                <li *ngFor="let item of list">
                <input 
                    type="checkbox" 
                    value="{{item.value}}"
                    [disabled]="item.disabled"
                     (change)="onCheckboxChange($event, item)"
                    /> 
                    {{item.label}}<br>
                </li>
            </ng-container>
          </ul>
         <pre> {{checkedList | json}} </pre>
        `

更新试试这个：

<table border="1">
  <thead>
    <td>ID</td>
    <td>Name</td>
    <td>Checked</td>
    <td>Uncheck if Already Checked</td>
  </thead>
  <tbody>
    <tr *ngFor="let item of list; let i = index">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>
        <input 
          [disabled]="shouldCheckboxesBeDisabled && !list[i].checked"
          type="checkbox" 
          [(ngModel)]="list[i].checked"
          (change)="recheckDisablingStatus()">
      </td>
      <td><button (click)="uncheckIfAlreadyChecked(i)">Uncheck If Checked</button></td>
    </tr>
  </tbody>
</table>

从“@angular/core”导入{Component}；
从“/list”导入{list}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
列表：用于您的ref的数组
原始答案
尝试一下：
import { Component } from "@angular/core";
import { Observable, of } from "rxjs";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  list$: Observable<Array<any>>;
  checked = [];
  shouldCheckboxesBeDisabled = false;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // this.list$ = this.http.get<Array<any>>('/assets/data.json');
    this.list$ = of([
      {
        id: 1,
        name: "Name 1",
        checked: false
      },
      {
        id: 2,
        name: "Name 2",
        checked: true
      },
      {
        id: 3,
        name: "Name 3",
        checked: false
      },
      {
        id: 4,
        name: "Name 4",
        checked: true
      },
      {
        id: 5,
        name: "Name 5",
        checked: false
      },
      {
        id: 6,
        name: "Name 6",
        checked: true
      },
      {
        id: 7,
        name: "Name 7",
        checked: false
      },
      {
        id: 8,
        name: "Name 8",
        checked: true
      },
      {
        id: 9,
        name: "Name 9",
        checked: false
      },
      {
        id: 10,
        name: "Name 10",
        checked: true
      }
    ]);
  }

  onCheckBoxChange(itemId, checked) {
    if(checked) {
      this.checked.push(itemId);
    } else {
      const itemIndexToRemove = this.checked.indexOf(itemId);
      this.checked.splice(itemIndexToRemove, 1);
    }
    this.shouldCheckboxesBeDisabled = this.checked.length >= 5;
  }
}


身份证件
名称
选中的
{{item.id}
{{item.name}

在您的组件中：
从“@angular/core”导入{Component}；
从“rxjs”导入{可观察的}；
从“@angular/common/http”导入{HttpClient}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
列表$：可观察到的参考
另外，试着在这里问一下，你可能会从我这里得到一个拼写错误的答案，即使在更改后也没有任何想法？我更正了问题我感谢你的帮助，你能再做一件事吗？如果我通过id值，它应该检查复选框是否选中，如果选中，取消选中，非常感谢你，我在那里，我很高兴很抱歉，我不太明白您上面的评论是什么意思。您的意思是复选框的选中状态将出现在数据中，并且我必须首先使用该选中值加载它吗？我的意思是，假设名称3项的选中状态为true，您希望选中表中的复选框3。是吗你的意思是什么？从TS中，如果我有“id”列值，我需要一个逻辑来检查相应的复选框是否已选中，如果选中，则取消选中该复选框，如果未选中该复选框会发生什么？使其选中？或不执行任何操作？如果未选中，则不执行任何操作
import { Component } from "@angular/core";
import { list } from './list';

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  list: Array<any>;
  checked = [];
  shouldCheckboxesBeDisabled = false;

  ngOnInit() {
    this.list = list;
    this.recheckDisablingStatus();
  }

  recheckDisablingStatus() {
    this.shouldCheckboxesBeDisabled = this.list.filter(item => item.checked).length >= 5;
  }

  uncheckIfAlreadyChecked(itemIndex) {
    const isChecked = this.list[itemIndex].checked;
    this.list[itemIndex].checked = isChecked ? false : isChecked;
    this.recheckDisablingStatus();
  }
}

<table border="1">
  <thead>
    <td>ID</td>
    <td>Name</td>
    <td>Checked</td>
    <td>Uncheck if Already Checked</td>
  </thead>
  <tbody>
    <tr *ngFor="let item of list; let i = index">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>
        <input 
          [disabled]="shouldCheckboxesBeDisabled && !list[i].checked"
          type="checkbox" 
          [(ngModel)]="list[i].checked"
          (change)="recheckDisablingStatus()">
      </td>
      <td><button (click)="uncheckIfAlreadyChecked(i)">Uncheck If Checked</button></td>
    </tr>
  </tbody>
</table>

<table border="1">
  <thead>
    <td>ID</td>
    <td>Name</td>
    <td>Checked</td>
  </thead>
  <tbody>
    <tr *ngFor="let item of list$ | async; let i = index">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>
        <input 
          [disabled]="shouldCheckboxesBeDisabled && checked.indexOf(item.id) < 0"
          type="checkbox" 
          (change)="onCheckBoxChange(item.id, $event.target.checked)">
      </td>
    </tr>
  </tbody>
</table>

import { Component } from "@angular/core";
import { Observable, of } from "rxjs";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  list$: Observable<Array<any>>;
  checked = [];
  shouldCheckboxesBeDisabled = false;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // this.list$ = this.http.get<Array<any>>('/assets/data.json');
    this.list$ = of([
      {
        id: 1,
        name: "Name 1",
        checked: false
      },
      {
        id: 2,
        name: "Name 2",
        checked: true
      },
      {
        id: 3,
        name: "Name 3",
        checked: false
      },
      {
        id: 4,
        name: "Name 4",
        checked: true
      },
      {
        id: 5,
        name: "Name 5",
        checked: false
      },
      {
        id: 6,
        name: "Name 6",
        checked: true
      },
      {
        id: 7,
        name: "Name 7",
        checked: false
      },
      {
        id: 8,
        name: "Name 8",
        checked: true
      },
      {
        id: 9,
        name: "Name 9",
        checked: false
      },
      {
        id: 10,
        name: "Name 10",
        checked: true
      }
    ]);
  }

  onCheckBoxChange(itemId, checked) {
    if(checked) {
      this.checked.push(itemId);
    } else {
      const itemIndexToRemove = this.checked.indexOf(itemId);
      this.checked.splice(itemIndexToRemove, 1);
    }
    this.shouldCheckboxesBeDisabled = this.checked.length >= 5;
  }
}