'Disable button unless checkbox is checked (Angular 7+)?

I want to button to be disabled unless all checkboxes have been checked? How do you implement this in Angular?

This is different because it is not a form and this question has not been answered, since there is no for loop.

    <div class="md-input-group md-checkbox md-input--nested-1">
      <input type="checkbox" class="md-input md-checkbox__input" id="checkboxNested1" name="checkboxNested1">
      <label style="margin-left: -30px;" class="md-checkbox__label" for="checkboxNested1">
        <p>Checkbox 1</p>
      </label>
    </div>

    <div class="md-input-group md-checkbox md-input--nested-1">
      <input type="checkbox" class="md-input md-checkbox__input" id="checkboxNested1" name="checkboxNested1">
      <label style="margin-left: -30px;" class="md-checkbox__label" for="checkboxNested1">
        <p>Checkbox 2</p>
      </label>
    </div>

   <button class="md-button" md-button color="red" aria-label="delete">Delete organization</button>
htmlcssangulartypescript


Solution 1:[1]

For example: Angular 2 Checkbox Two Way Data Binding.

export class FooComponenet {
   checkbox1 = false; // bind first checkbox
   checkbox2 = false; // another checkbox
}

<!-- or use (change)="methodName()" -->
<input type="checkbox" [checked]="checkbox1" (change)="checkbox1 = !checkbox1"/>
<input type="checkbox" [checked]="checkbox2" (change)="checkbox2 = !checkbox2"/>

<button [disabled]="!checkbox1 || !checkbox2">Bar</button>

<!-- or this -->
<button [attr.disabled]="!checkbox1 || !checkbox2">Bar</button>

You can use too:

Solution 2:[2]

Disabling the form button until your checkbox is checked used required attribute to tell DOM that this field is required and use disabled property to disable the button. Below is the example

 <form #myform="ngForm">
     <div class="md-input-group md-checkbox md-input--nested-1">
        <input type="checkbox" class="md-input md-checkbox__input" id="checkboxNested1" name="checkboxNested1" **required**>
          <label style="margin-left: -30px;" class="md-checkbox__label" for="checkboxNested1">
            <p>Checkbox 1</p>
          </label>
        </div>
      <div class="md-input-group md-checkbox md-input--nested-1">
      <input type="checkbox" class="md-input md-checkbox__input" id="checkboxNested1" name="checkboxNested1" required>
      <label style="margin-left: -30px;" class="md-checkbox__label" for="checkboxNested1" >
        <p>Checkbox 2</p>
      </label>
    </div>
     <button class="md-button" md-button color="red" aria-label="delete" [disabled]="!myform.valid">Delete organization</button>

    </form>

Solution 3:[3]

In the input tag we have (change)="confirmationCheck($event)" which is used in app.component.ts file. We have eventname.target.checked property which gives us true or false value according to event change while check and uncheck the checkbox.

app.component.html
<span><input type="checkbox" (change)="confirmationCheck($event)" name="adpopup"></span>Confirmation & acknowledgement the feature.</p>


app.component.ts
confirmationCheck(eventname){
   console.log(eventname.target.checked)
}

Solution 4:[4]

Why not use [(ngModel)] over an array of booleans? a indexOf can help if all are checked

<input type="checkbox" [(ngModel)]="check[0]"/>
<input type="checkbox" [(ngModel)]="check[1]"/>
  ....
<input type="checkbox" [(ngModel)]="check[6]"/>
<button [disabled]="check.indexOf(false)>=0">Bar</button>

check:boolean[]=[0,1,2,3,4,5,6].map(_=>false)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 user8395657
Solution 3
Solution 4 Eliseo

Related Questions