CODEWITHSUNDEEP
javascriptangularjscheckboxionic-framework
CraZyDroiD
CraZyDroiD

Reputation: 7127

Check only one checkbox in ionic

In my form i have two checkboxes.But i can check both the checkboxes.How can i disable the other checkbox if one checkbox is checked.

this is how i gave my checkboxes

<label><h4><b>Payment Type</b></h4></label>

            <ion-checkbox id="isChecked1" name="isChecked1" ng-model="isChecked1">Immediate Payment</ion-checkbox>  
            <ion-checkbox id="isChecked2" name="isChecked2" ng-model="isChecked2">Schedule Payment</ion-checkbox>

Upvotes: 2

Views: 12971

Answers (5)

Juan Antonio
Juan Antonio

Reputation: 2624

Maybe is a dirty solution but, without use of any function in the controller.

In the page controller:

private trueFormControl = new FormControl(false);
private falseFormControl = new FormControl(false);

And in the view:

<ion-content>

    <ion-item>
      <ion-label>Yes</ion-label>
      <ion-checkbox color="primary" (click)="falseFormControl.setValue(false)" [formControl]="trueFormControl"></ion-checkbox>
    </ion-item>

    <ion-item>
      <ion-label>No</ion-label>
      <ion-checkbox color="primary" (click)="trueFormControl.setValue(false)" [formControl]="falseFormControl"></ion-checkbox>
    </ion-item>

  <br>

  <div class="row">
      <ion-button type="submit" (click)="continue(actualPos)" [disabled]="!falseFormControl.value && !trueFormControl.value">Continue</ion-button>
  </div>

</ion-content>

Use example:

enter image description here

Upvotes: 4

Miguel Carrillo
Miguel Carrillo

Reputation: 347

html

<ion-item *ngFor="let schedule of schedules">                                                         
  <ion-checkbox [(ngModel)]="schedule.selected" (click)="toggleSelected(schedule)"></ion-checkbox>                                                       
</ion-item>

Typescript

toggleSelected(item) {             
  ///////////////// Radio Behaviour in Checkbox (Only Select 1 checkbox at time) //////////////////////////////     
  if (this.selectedSchedules.length > 0) {   
    //this.schedules.forEach(r => {r.selected = false;}) // Always 1 selected
    this.schedules.filter(r => r.info.id != item.info.id).forEach(r => {
      r.selected = false;
    })
    this.selectedSchedules = [];         
  }

  if (!item.selected) { this.selectedSchedules.push(item); }
  else if (item.selected) {            
    let index = this.selectedSchedules.findIndex(c => c.info.id == item.info.id);
    if (index > -1) { this.selectedSchedules.splice(index, 1); }            
  }       
}

Upvotes: 2

Thomas D
Thomas D

Reputation: 83

in html:

<ion-checkbox id="isChecked1" name="isChecked1" ng-model="choice.isChecked1" ng-change="uncheckTheOtherOne()>Immediate Payment</ion-checkbox >

in js:

$scope.uncheckTheOtherOne = function(){
        $scope.choice.isChecked2 = false;
    };

but im not sure if this is a good practice

Upvotes: 0

briosheje
briosheje

Reputation: 7446

I'm not getting why you're not using a radio button, but here is a pretty easy example using only javascript.

Working fiddle:

http://jsfiddle.net/qgqto6t7/

HTML:

<input type="checkbox" id="isChecked1">Immediatly</input>
<input type="checkbox" id="isChecked2">Later</input>

Javascript:

var chk1 = document.getElementById("isChecked1");
var chk2 = document.getElementById("isChecked2");

chk1.onchange = function() {
    chk1.checked ? chk2.disabled = true : chk2.disabled = false;
};

chk2.onchange = function() {
    chk2.checked ? chk1.disabled = true : chk1.disabled = false;
};

However, please take in consideration using radio buttons for such a task. I'm pretty sure that they were invented for a reason :)

Also, my example is in pure javascript because I'm not very familiar with angularjs or whatever you're using. In any case, you should easily be able to accomplish it using javascript only without affecting your scripts that much.

Edit:: Moreover, according to your IDs, this script should already be working for you, regardless angularjs or not

Upvotes: 2

deeban
deeban

Reputation: 149

Sorry.. To made it simple you can use radio button..

Else..

use javascript like this,

    Check1 = document.getElementById("check1");
    Check2 = document.getElementById("check2");
    if(Check1.checked)
    Check2.checked = false;

Upvotes: 0

Related Questions