边缘浏览器无法检测到自定义复选框

Question

我创建了自定义单选按钮，这些单选按钮本质上是带有附加逻辑的复选框，以使其像单选按钮一样起作用。当用户进行选择时，应该启用提交按钮。在所有期望Edge和IE11的浏览器上运行正常。单选按钮正在按您期望的方式切换，但是Edge和IE无法检测到它们，因为我的提交按钮仍然处于禁用状态。

我看过tutorials可以使它工作，但到目前为止还算不上运气。我正在使用反应式表单，并且正在动态生成表单。我在表单中使用通用单选按钮时遇到麻烦，因此这就是为什么我选择使用功能类似于单选按钮的复选框的原因。我正在寻找最简单的解决方法。弄清楚如何使IE11和Edge能够检测到它们，以便我可以提交表单或使用可与动态响应式表单一起使用的单选按钮。

                   <section
                        class="table__row"
                        *ngFor="let preference of communicationPref.preferences">
                        <div class="table__row__question">
                            <p class="t-data t-bold">{{preference.display_text}}</p>
                            <p class="t-caption">{{preference.description}}</p>
                        </div>
                        <ng-container *ngFor="let option of preference.options; let i = index">
                            <div
                                *ngIf="!preference.select_many; else oneOption"
                                class="table__cell">
                                <div class="u-maxXY u-flex u-justifyCenter">
                                    <input
                                        type="checkbox"
                                        class="input input--checkbox"
                                        ngDefaultControl
                                        [formControl]="contactPreferencesForm.get(['communication', 'preferences']).controls[i]">
                                </div>
                            </div>

                           // these are the radio buttons
                            <ng-template #oneOption> 
                                <div class="table__cell">
                                    <div class="u-maxXY u-flex u-justifyCenter">
                                        <label>
                                            <input
                                                type="checkbox"
                                                class="input input--radio"
                                                name="checkbox"
                                                ngDefaultControl
                                                [formControl]="contactPreferencesForm.get(['communication', 'preferences']).controls[i]"
                                                (click)="selectUserPreference(i)">
                                            <input
                                                class="input input--radio"
                                                type="hidden"
                                                name="checkbox"
                                                value="">
                                        </label>
                                    </div>
                                </div>
                            </ng-template>
                        </ng-container>
                    </section>

//初始化表格

        this.communicationPref['preferences'].forEach((preference) => {

            const communication_preferences = this.contactPreferencesForm.get('communication') as FormGroup;
            communication_preferences.addControl('preferences', new FormArray([]));
            const cp_array = this.contactPreferencesForm.get(['communication', 'preferences']) as FormArray;

            preference.options.forEach((option, i) => {
                cp_array.push(new FormControl(null));

                if (!!option.name) {
                    this.allPreferences.push(option.name);
                }
            });
        });

//使复选框类似于单选按钮

selectUserPreference(choice) {
    if (!!this.communicationPref) {
        this.communicationPref['preferences'].forEach((preference) => {
            if (!!preference.select_many) {

                this.contactPreferencesForm.reset();

                const formValue = this.contactPreferencesForm.get(['communication', 'preferences']).value;
                formValue[choice] = true;

                this.contactPreferencesForm.get(['communication', 'preferences'])
                    .patchValue(formValue);
            }
        });
    }
}