CODEWITHSUNDEEP
checkboxangularevent-handling
Kartikeya Mishra
Kartikeya Mishra

Reputation: 126

How can we disable other checkboxes by clicking a checkbox from a list in Angular2

I have an list of checkboxes. In this I want to disable other checkboxes When I have checked any item from list. Now if I uncheck that item then now all checkboxes need to be enabled.

This is the plunker - http://plnkr.co/edit/5FykLiZBQtQb2b31D9kE?p=preview

On unchecking any checkbox all the rest checkboxes are still disabled. How can I do this?

This is app.ts file -

  import {bootstrap} from 'angular2/platform/browser';
  import {Component} from 'angular2/core'

  @Component({
   selector: 'my-app',
   template: `
        <h2>{{title}}</h2>
        <label  *ngFor="let cb of checkboxes">
       {{cb.label}}<input [disabled]="cb.status" type="checkbox"
       [(ngModel)]="cb.state" (click)="buttonState(cb.id)">
       </label><br />
      {{debug}}
      `
   })
   class App {
         title = "Angular 2 - enable button based on checkboxes";
         checkboxes = [{label: 'one',id: '0', status: ''},{label: 'two', id: '1', status:''},{label: 'three', id: '2', status: ''}];
         constructor() { 
           //this.buttonState();
           console.log("constructor called"); }
          buttonState(id) {
             console.log( id + "Button State Called");
             //return  this.checkboxes[0].status;
             if(this.checkboxes[id].state == true){
                this.checkboxes[id].status = true;
                this.checkboxes[(id+1)%3].status = false;
                this.checkboxes[(id+2)%3].status = false;

                console.log("True Block");
             }
             else (this.checkboxes[id].state == false) {
                this.checkboxes[id].status = false;
                this.checkboxes[(id+1)%3].status = true;
                this.checkboxes[(id+2)%3].status = true;

                console.log("False Block");
              }
         }

   get debug() {
        return JSON.stringify(this.checkboxes);
   }
}

bootstrap(App, [])
  .catch(err => console.error(err));

Upvotes: 2

Views: 4019

Answers (2)

Kartikeya Mishra
Kartikeya Mishra

Reputation: 126

another solution..not a good one...but still you can try it if you find any problem 

    class App {
      title = "Angular 2 - enable button based on checkboxes";
        checkboxes = [{label: 'one',id: '0', status: ''},{label: 'two', id: '1', status:''},{label: 'three', id: '2', status: ''}];
      constructor() { 
          console.log("constructor called");
      }
      buttonState(id) {
       console.log( this.checkboxes[id].state + "Button State Called");
      //return  this.checkboxes[0].status;
      if(this.checkboxes[id].state == true ){
         this.checkboxes[id].status = false;
         this.checkboxes[(id+1)%3].status = false;
         this.checkboxes[(id+2)%3].status = false;

         console.log("True Block");
      }
      else if(this.checkboxes[id].state == false ||  this.checkboxes[id].state == undefined) {
        this.checkboxes[id].status = false;
        this.checkboxes[(id+1)%3].status = true;
        this.checkboxes[(id+2)%3].status = true;

        console.log("False Block");
      }
  }

http://plnkr.co/edit/mAvSQbyP9oh84LWfpGIm?p=preview

Upvotes: 1

kaxi1993
kaxi1993

Reputation: 4700

Use this buttonState function instead yours:

 buttonState(id) {
   this.checkboxes.forEach(function(checkbox) {
     if (checkbox.id !== id) {
       checkbox.status = !checkbox.status;
     }
   })
 }

see plunker example: http://plnkr.co/edit/ASzUR2jawpbifvwBXNO9?p=preview

Upvotes: 2

Related Questions