Check only one checkbox in ionic

allow only one checkbox to be checked angular 4
ionic 4 checkbox checked event
allow only one checkbox to be checked angular 6
ionic checkbox
ionic 4 checkbox group
ionic radio button
select only one checkbox using vuejs
checkbox in ionic 5

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>

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

Working fiddle:


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


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

Ionic - Checkbox, These two are styled differently but are used for the same purposes. The following example shows two simple checkboxes, one is checked and the other is not� Ionic checkbox is almost the same as toggle. These two are styled differently but are used for the same purposes. Adding Checkbox. When creating a checkbox form, you need to add the checkbox class name to both label and the input elements. The following example shows two simple checkboxes, one is checked and the other is not.


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


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.selected = false;
    this.selectedSchedules = [];         

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

How to show/hide button for at least one checkbox checked in ionic3 , Is it possible to hide or show contents in a div only when an option is selected from ion-select. FnnHuman March 6, 2018, 11:54am #2. Developing from what was discussed in the last section I want to demonstrate how we can validate multiple checkboxes within an Ionic 2 form (as this is both one of those trickier validation requirements and we might also want to make sure that the user makes at least one selection from the available options).

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-checkbox color="primary" (click)="falseFormControl.setValue(false)" [formControl]="trueFormControl"></ion-checkbox>

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


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


Use example:

Ionic-v1 [ I want to choose only 1 checkbox] - ionic-v1, ion-checkbox>. Here's my codes. I want to choose only one checkbox in my app. How can I do that? (I'm new). robinyo December 28, 2017,� Hi Dear Friends here u can know to Ionic checkbox with ng repeat with only one item selected In this post we will show you Best way to implement Ionic – How to do Check All with Ion-Checkbox , hear for How to Ionic checkbox with ng repeat with only one item selected with Download .we will give you demo,Source Code and examples for implement

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


use javascript like this,

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

Ionic 5 Indeterminate Checkboxes Tutorial, Select/Unselect All Checkboxes Items with Ionic 5 Indeterminate State < allItems) { // One item is selected among all checkbox elements this. Hello, I want to get a list of states with two ckeckbox inside each item, for eg ; a list of company and every company has two checkbox : SMS and Email. I try this code, but it doesn’t work perfectly: <ion-content padding> <ion-grid> <ion-list> <ion-row> <ion-item *ngFor="let gp of groups"> <ion-label> {{gp}}</ion-label> </ion-item> <ion-grid> <ion-row> <ion-col col-md-3> <ion-label>SMS</ion-

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

Only One Checkbox Selected, Tutorials of (Only One Checkbox Selected) by thompsonemerson | Download Code One Checkbox Selected</title> </head> <body> <html ng-app="ionicApp "> type="checkbox" ng-model="item.checked" ng-click="updateSelection($ index,� I load the User Id from the database(rest api) and then I used ion check box to select the user whom i want to delete but as I have all the users param same i.e uid

Trouble with checkboxes to limit the number of selected box � Issue , Ionic version: (check one with "x") (For Ionic 1.x issues, please use for 2 box only , when we click the 3rd it doesn't check it for the first click but� There are a couple sections that have multiple checkboxes but ONLY one can be marked. We won't even accept the form if there is more than one option marked. Most sections there are two boxes, check one but not the other. There is one section though that has 16 boxes, and yes only one can be marked.

Ionic checkbox with ng repeat with only one item selected, Furthermore, I am going to use ion-checkbox with ng-repeat and one without ng- repeat and still make them work together i.e if you select the� Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as url, email, text, textarea etc. If you require a complex

Ionic 5|4 How to Select/ Unselect All Checkboxes with Indeterminate , But there is one more state known as Indeterminate state. The indeterminate state usually depicts that only partial checkboxes are checked in� This tutorial is an introduction to AI usage in Ionic applications. In the previous tutorials (here and there), we used the Dialogflow service to create an AI chatbot. That was quite easy, however, we only focused on a tiny aspect of AI. This technology has an incommensurable scope for the ones that want to master it.

  • why would you use checkboxes for such a use? radio buttons are easier for such a task, aren't them?
  • This is not ionic.
  • @que hence my preface: "but here is a pretty easy example using only javascript."
  • It is not working because you're not using an event listener, you're just checking, onload, if the check1 is checked. you should use onchange.