select要素が変更されるたびに、removeAttrを発動させたい

jqueryを使って、連動するセレクトボックスを作りました。
親側のセレクト要素が未選択の場合に子側のセレクト要素を選択できないようにしたかったので、子側のセレクトボックスの初期値にdisabledを指定しました。

しかし、最初に親側のセレクト要素が変更されたときのみしかdisabledをとる指示が反映されません。
ex)セレクト要素で1を選んだ後に2を選ぶと子側のセレクト要素が選択できなくなってしまう

この場合どのようにすればよいでしょうか。ご教授よろしくお願いいたします。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    // Page init event
    document.addEventListener('init', function(event) {
      var page = event.target;

      if (page.matches('#first-page')) {
        
        $(function() {
          var $children = $('.children'); 
          var original = $children.html();
          
          $('.parent').change(function() {
            var val1 = $(this).val();
              $children.html(original).find('option').each(function() {
                var val2 = $(this).data('group'); 
                if (val1 != val2) {
                  $(this).remove();
                }
              });
            if (val1 != "") {
              $children.removeAttr('disabled');
            }
          });
        });

        page.querySelector('#btn').onclick =
        function() {
          let nayami = document.getElementById('select2').value;
          if (nayami==='') {
            alert('選択してください');
          } else {
            document.querySelector('#navigator').pushPage(nayami); 
          }         
        };           

      } else if (page.matches('#second-page')) {

        page.querySelector('#pop-button').onclick = function() {
          document.querySelector('#navigator').popPage();
        };

      }
    });

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }
  </script>
</head>
<body>
  <ons-navigator id="navigator" page="page1.html"></ons-navigator>

  <ons-template id="page1.html">
    <ons-page id="first-page">
      <ons-toolbar>
        <div class="center">fixy</div>
      </ons-toolbar>

      <div class="content" style="text-align: center">

        <div class="selectwrapper" style="margin: 0 0 5vh 0">
          <ons-select class="parent" id="select1" modifier= "underbar">
            <option value="" selected disabled>select</option>
            <option value="1">1</option>
            <option value="2">2</option>
          </ons-select>
        </div>
        <div class="selectwrapper" style="margin: 0 0 5vh 0">
          <ons-select class="children" id="select2" modifier="underbar" disabled>
            <option data-group="" value="" selected></option>
            <option data-group="1" value="page2.html">1-2</option>
            <option data-group="2" value="page2.html">2-2</option>
          </ons-select>
        </div>
        <ons-button id="btn">GO!</ons-button>
      </div>
    </ons-page>
  </ons-template>

  <ons-template id="page2.html">
    <ons-page id="second-page">
      <ons-toolbar>
        <div class="left"><ons-back-button>Page 1</ons-back-button></div>
        <div class="center">Page 2</div>
      </ons-toolbar>

      <div class="content" style="text-align: center">
        <p>This is the second page.</p>
        <ons-button id="pop-button">Pop page</ons-button>
      </div>
    </ons-page>
  </ons-template>
</body>
</html>

コード