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>
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:
I'm not getting why you're not using a radio button, but here is a pretty easy example using only javascript.
Working fiddle:
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
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); }
}
}
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;
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
