Select2多选分组选择：父节点取消后子节点未恢复启用问题求助

已实现的自定义功能 #

• 选中父节点时，将父节点加入选中列表，同时禁用其子节点
• 取消选中父节点时，将父节点从选中列表移除，同时启用其子节点

异常复现步骤 #

• 选中父节点
• 打开下拉选项，此时可见子节点已禁用
• 点击搜索框外部关闭下拉选项
• 取消选中父节点
• 再次打开下拉选项，子节点仍处于禁用状态

正常场景：跳过步骤2、3，直接执行「选中父节点→取消选中父节点→打开下拉选项」，子节点可正常恢复启用

可复现代码 #

JavaScript #

const tags = [{
    'id': 1,
    'text': 'Parent 1',
    'children': [{
        'id': 'tag11',
        'text': 'Tag 11'
      },
      {
        'id': 'tag12',
        'text': 'Tag 12'
      }, {
        'id': 'parent1',
        'text': 'Parent 1'
      },
    ],
  },
  {
    'id': 2,
    'text': 'Parent 2',
    'children': [{
        'id': 'tag21',
        'text': 'Tag 21'
      },
      {
        'id': 'tag22',
        'text': 'Tag 22'
      },
      {
        'id': 'parent2',
        'text': 'Parent 2'
      },
    ],
  }
];
$(document).ready(function() {

  const selectField = $('#target');
  
  selectField.select2({
    width: '300px',
    templateResult: function(option) {
      if (option.element && (option.element).hasAttribute('hidden')) {
        return null;
      }
      return option.text;
    }
  });

  selectField.on('select2:open', function(e) {
    let allOptionsStart = this.options;
    $('#select2-target-results').on('click', function(event) {
      let allOptions = [];
      $.each(allOptionsStart, (key, option) => {
        allOptions[option.value] = option;
      });

      const data = $(event.target).html();
      const selectedOptionGroup = data.toString().trim();

      let selectedOptionGroupId = '';
      $.each(tags, (key, tag) => {
        if (selectedOptionGroup.toString() === tag.text.toString()) {
          $.each(tag.children, (key, child) => {
            if (selectedOptionGroup.toString() === child.text) {
              selectedOptionGroupId = child.id;
            }
            const jTag = $(allOptions[child.id]);
            if (Object.keys(jTag).length > 0) {
              if (!jTag[0].hidden) {
                jTag[0].disabled = true;
              }
            }
          });
        }
      });
      $('select').select2({
        width: '300px',
        templateResult: function(option) {
          if (option.element && (option.element).hasAttribute('hidden')) {
            return null;
          }
          return option.text;
        }
      });
      event.stopPropagation();

      let options = selectField.val();
      if (options === null || options === '') {
        options = [];
      }
      options.push(selectedOptionGroupId);

      selectField.val(options);
      selectField.trigger('change'); // Notify any JS components that the value changed
      selectField.select2('close');
    });
  });

  selectField.on('select2:unselecting', function(e) {
    let allOptions = [];
    $.each(this.options, (key, option) => {
      allOptions[option.value] = option;
    });
    const unselectedGroupText = e.params.args.data.text;
    $.each(tags, (key, tag) => {
      if (unselectedGroupText === tag.text) {
        $.each(tag.children, (key, childTag) => {
          const jTag = $(allOptions[childTag.id]);
          if (Object.keys(jTag).length > 0) {
            if (!jTag[0].hidden) {
              jTag[0].disabled = false;
            }
          }
        });
      }
    });
  });

});

CSS #

li.select2-results__option strong.select2-results__group:hover {
  background-color: #ddd;
  cursor: pointer;
}

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<select id="target" data-placeholder="Select an option" multiple='multiple'>
  <optgroup label="Parent 1">
    <option value="tag11">Tag 11</option>
    <option value="tag12">Tag 12</option>
    <option value="parent1" hidden>Parent 1</option>
  </optgroup>
  <optgroup label="Parent 2">
    <option class="tag21">Tag 21</option>
    <option class="tag22">Tag 22</option>
    <option value="parent2" hidden>Parent 2</option>
  </optgroup>
</select>

恳请帮忙排查问题原因，让功能在两种场景下都能正常工作。感谢！

内容的提问来源于stack exchange，提问作者ivantxo