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!!!
Your approach is not wrong. 

Try typecasting it with 

```
var elements = (<HTMLInputElement[]><any>document.getElementsByName('drama'));

```

alternative try using ngModel, it makes your life easier. 

```
<input [(ngModel)]="checkBox.option1" type="checkbox" data-toggle="toggle">Option
<input [(ngModel)]="checkBox.option2" type="checkbox" data-toggle="toggle">Option

```

`<button [disabled]='checkBox.option1 || checkBox.option2'>Delete</button>`

> 
> app.component.ts
> 
> 
> 

```
checkBox:any{};
constructor(){
   checkBox={
       option1:false,
       option2:false
   };
}

```

optionChecked becomes true when checked thus disabling the button