Question: I work on angular 4, I have list of checkbox which on page load will be unchecked.
There is a delete button which will be enabled when any checkbox is checked.

hero.component.html

```
<div *ngFor="let hero of heros">
    <span>
        <input type='checkbox' name='drama' (click)='selectedHero()' />
    </span>
    <span>hero.name</span>
</div>
<button [class.disabled]='!inEditMode'>Delete</button>

```

hero.component.ts

```
private inEditMode = false;

selectedHero(){
    var elements = document.getElementsByName("drama");
    for (let i = 0; i < elements.length; i++) {
        if (elements[i].type == "checkbox") {
            if (elements[i].checked) {
                this.inEditMode = true;
            }
            else {
                this.inEditMode = false;
            }
        }
    }
}

```

I am getting error in `.type` and `.checked`. 

Error is 

```
Property 'type' doesnot exist on type 'HTMLElement
Property 'checked' doesnot exist on type 'HTMLElement.

```

How can I iterate over the checkboxes to see if any on them is checked, and if checked enable the button. And if not checked disabled the button? Please guide

Answer: 
Your code is working fine, but your for loop in typescript sometime works and sometime fails because of for loop.

in your html : `<button [disabled]='!inEditMode'>Delete</button>`

In your typescript: 

```
selectedHero() {
   var elements = (<HTMLInputElement[]><any>document.getElementsByName("drama"));
   for (let i = 0; i < elements.length; i++) {
   if (elements[i].type == "checkbox") {
      if (elements[i].checked) {
         console.log("Checked", elements[i].checked);
         this.inEditMode = true;
         break;                      //<== Add this line in your for loop
       }
       else {
         console.log("Unchecked", elements[i].checked);
         this.inEditMode = false;
       }
     }
   }
 }

```

When for loop starts until all elements has to be check you have to break the for loop when atleast one checkbox is checked.

Here is working example: [Enable Button on mutiple check box selection](https://stackblitz.com/edit/angular-edmbwt)

Hope this will works for you!!!
Add one extra property in Hero model like, IsSelected and bind it with every check-boxes 

```js
selectedHero() {

  var data = this.heroes.find((obj: Hero) => obj.IsSelected === true);
  if (data) {
    this.inEditMode = true;
  } else {
    this.inEditMode = false;
  }

}
```

```html
<div *ngFor="let hero of heros">
  <span>
       <input type='checkbox' value="{{hero.IsSelected}}" [(ngModel)]="hero.IsSelected" name='IsSelected' (change)='selectedHero()'/> />
    </span>
  <span>hero.name</span>
</div>
<button [class.disabled]='!inEditMode'>Delete</button>
```

[stackblitz working demo](https://angular-tour-of-heroes-example-u1cmlh.stackblitz.io/heroes)