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

Question

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>

Does this answer your question? [Angular2, disable button if no checkbox selected](https://stackoverflow.com/questions/34140847/angular2-disable-button-if-no-checkbox-selected) — R. Richards, Dec 18 '19 at 19:50
I'll get you started with some hints. This is all available in the documentation. [disabled] will control if the button is disabled or not, and you can have validation on the checkbox by using Form Controls. https://angular.io/guide/form-validation — masu9, Dec 18 '19 at 19:51
The Angular2 doesn't answer my question because he has multiples checkboxes. I want to do it only for 2 different inputs — Paul Sartre, Dec 18 '19 at 21:24

Numichi · Accepted Answer · 2019-12-19T06:25:38.727

3

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:

Template-Driven (https://angular.io/guide/forms) or Reactive forms (https://angular.io/guide/reactive-forms)
Form validator (https://angular.io/guide/form-validation)

edited Dec 19 '19 at 06:25

answered Dec 18 '19 at 20:08

Numichi

926
6
14

1

So I want it enabled once both boxes are checked, this disables the button when you click on check. – Paul Sartre Dec 18 '19 at 21:14
1

You're right. I corrected. :) Bool logic was reverse. – Numichi Dec 19 '19 at 06:21
why not use ngModel over an array of booleans? – Eliseo Apr 27 '22 at 06:41
That is also a solution. There are several ways to do this. But why do I make another handler between input and button just to modify the disabled status? There are many solutions to this problem. This is one of all. – Numichi Apr 27 '22 at 07:57

score 0 · Answer 2 · answered Dec 24 '19 at 03:37

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>

Amit · Answer 3 · 2022-04-27T05:29:21.937

0

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

edited Apr 27 '22 at 05:29

answered Apr 26 '22 at 05:20

Amit

1
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 26 '22 at 06:59

score 0 · Answer 4 · answered Apr 27 '22 at 06:39

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)

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

4 Answers4