ionicでセレクトボックスで値を選択したタイミングでイベントを発生させたい

ionicを勉強しているものです。
ユーザー検索ができる画面を実装しているのですが、以下のことを実現したいです。

▼国籍のセレクトボックスクリック時

▼指定なしにチェックを入れる

※国籍を選択できなくする

▼国籍を選択する

※指定なしを選択できなくする

meeting.html

html
1<ion-header>
2  <ion-toolbar>
3    <ion-title>Meeting</ion-title>
4  </ion-toolbar>
5</ion-header>
6
7<ion-content>
8  <form (ngSubmit)="search()">
9    <ion-item>
10      <ion-label>国籍</ion-label>
11      <ion-select id="nationality" multiple="true" [(ngModel)]="searchCondtion.nationality" (ionChange)="checkNationality($event)" [ngModelOptions]="{standalone: true}" interface="sheet" selected-text="指定なし">
12        <ion-select-option *ngFor="let country of contryList" value="{{ country.value }}">{{ country.title }}</ion-select-option>
13      </ion-select>
14    </ion-item>
15    <p>年齢</p>
16    <ion-item>
17      <ion-label>下限</ion-label>
18      <ion-select [(ngModel)]="searchCondtion.startAge" [ngModelOptions]="{standalone: true}" interface="sheet" placeholder="選択してください。">
19        <ion-select-option value="nothing">指定なし</ion-select-option>
20        <ion-select-option *ngFor="let age of ageRange" value="{{ age }}">{{ age }}</ion-select-option>
21      </ion-select>
22    </ion-item>
23    <ion-item>
24      <ion-label>上限</ion-label>
25      <ion-select [(ngModel)]="searchCondtion.endAge" [ngModelOptions]="{standalone: true}" interface="sheet" placeholder="選択してください。">
26        <ion-select-option value="nothing">指定なし</ion-select-option>
27        <ion-select-option *ngFor="let age of ageRange" value="{{ age }}">{{ age }}</ion-select-option>
28      </ion-select>
29    </ion-item>
30    <ion-item>
31      <ion-label>
32        <ion-icon name="search"></ion-icon>
33      </ion-label>
34      <ion-input [(ngModel)]="searchCondtion.keyword" [ngModelOptions]="{standalone: true}" placeholder="キーワード入力"></ion-input>
35    </ion-item>
36    <ion-button full type="submit">検索</ion-button>
37  </form>
38

typedscript
1import { Component, OnInit } from '@angular/core';
2import { LoginPageRoutingModule } from '../login/login-routing.module';
3import { AlertController, NavController } from '@ionic/angular';
4@Component({
5  selector: 'app-meeting',
6  templateUrl: './meeting.page.html',
7  styleUrls: ['./meeting.page.scss'],
8})
9export class MeetingPage implements OnInit {
10  searchCondtion = {
11    "nationality": [],
12    "startAge": "nothing",
13    "endAge": "nothing",
14    "keyword": ""
15  };
16
17  ageRange = [];
18
19  public contryList = [
20    {
21      "title" : "指定なし",
22      "value" : "nothing",
23    },
24    {
25      "title" : "日本",
26      "value" : "japan",
27    },
28    {
29      "title" : "中国",
30      "value" : "china",
31    },
32    {
33      "title" : "台湾",
34      "value" : "taiwan",
35    },
36    {
37      "title" : "香港",
38      "value" : "hong kong",
39    },
40    {
41      "title" : "韓国",
42      "value" : "korea",
43    },
44    {
45      "title" : "アメリカ",
46      "value" : "usa",
47    }
48  ];
49
50  constructor() {
51    for(let i = 18; i < 121; i++){
52      this.ageRange.push(i);
53    }
54  }
55
56  checkNationality(event: any){
57    if(event.detail.value.includes("nothing")){
58      // 他の国名を選択できなくする
59     let nationality = document.getElementById('nationality') as HTMLSelectElement;
60      for(var i = 0; i < nationality.options.length; i++){
61        if(i > 0){
62          nationality.options[i].disabled = true;
63        }
64      }
65      // TODO 未実装
66    } else {
67      // disableが設定されていればはずす
68      // TODO 未実装
69    }
70
71  // 検索処理
72  search(){
73     // TODO 未実装
74  }

この実装で動作確認をしてみると選択した直後にイベントは発生せずにOKボタンを押すとcheckNationalityメソッドが実行されます。
そして、nationality.options.lengthのところで以下のエラーとなってしまいます。
ERROR TypeError: Cannot read property 'length' of undefined
at MeetingPage.checkNationality

セレクトボックスで値を選択したタイミングでのイベント発生のさせ方について調べてみたのですが、ionChangeを使ったサンプルコードが
ほとんどで参考となるサイトがありませんでした。また、指定なしを選択させた場合に他の国籍を選択できなくさせるところについても
options.lengthがないというエラーとなってしまい解決ができない状態です。

ionicにお詳しい方にお聞きしたいのですが、ionicではセレクトボックスにチェックをつけたタイミングを検知するイベントはないのでしょうか？そもそもこの要望は実現不可能なのでしょうか？
ご回答のほど、よろしくお願いいたします。