Angular中移除ngModel后的复选框实现方案：纯UI控制型复选框改造需求

没问题，完全可以实现这种不绑定数据、仅做UI交互的复选框！而且移除NgModel后，我们可以用更轻量化的方式来实现你要的“选中时禁用其他复选框”的功能，下面给你具体方案：

一、直接改造现有代码（无NgModel方案） #

你可以去掉[(ngModel)]和(ngModelChange)，改用原生的(change)事件来监听复选框状态变化，然后通过组件类里的变量来控制其他复选框的禁用状态。

模板代码修改： #

<label class="custom-control custom-checkbox" style="display: block">
  <input 
    type="checkbox" 
    class="custom-control-input" 
    id="myCheckbox" 
    name="myCheckbox"
    (change)="handleMainCheckboxToggle($event)"
  >
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">
    <span id="checkboxstart"> </span>
  </span>
</label>

<!-- 假设你的子复选框是类似这样的结构 -->
<label class="custom-control custom-checkbox">
  <input 
    type="checkbox" 
    class="custom-control-input" 
    id="child1"
    [disabled]="isMainCheckboxChecked"
  >
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">子复选框1</span>
</label>
<label class="custom-control custom-checkbox">
  <input 
    type="checkbox" 
    class="custom-control-input" 
    id="child2"
    [disabled]="isMainCheckboxChecked"
  >
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">子复选框2</span>
</label>
<label class="custom-control custom-checkbox">
  <input 
    type="checkbox" 
    class="custom-control-input" 
    id="child3"
    [disabled]="isMainCheckboxChecked"
  >
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">子复选框3</span>
</label>

组件类逻辑： #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 用于标记主复选框的选中状态，控制子复选框禁用
  isMainCheckboxChecked = false;

  handleMainCheckboxToggle(event: Event) {
    // 获取当前复选框的原生DOM元素
    const mainCheckbox = event.target as HTMLInputElement;
    // 更新状态变量
    this.isMainCheckboxChecked = mainCheckbox.checked;
  }
}

这个方案完全脱离了NgModel，纯靠原生事件和Angular的属性绑定来实现交互逻辑，完全符合你的需求。

二、Angular中不使用NgModel的复选框替代方案 #

除了上面的原生事件+属性绑定，还有几种常见的方案，适合不同场景：

1. 响应式表单（Reactive Forms） #

如果你的复选框是表单的一部分，或者需要更精细化的状态管理，可以用FormControl来替代NgModel。这种方式能更好地集成Angular的表单体系，还能方便监听状态变化：

组件类：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  mainCheckboxControl = new FormControl(false);
  // 子复选框的FormControl（如果需要）
  child1Control = new FormControl(true);
  child2Control = new FormControl(true);
  child3Control = new FormControl(true);

  ngOnInit(): void {
    // 监听主复选框的状态变化
    this.mainCheckboxControl.valueChanges.subscribe(checked => {
      // 禁用/启用子复选框
      const disableState = checked;
      if (checked) {
        this.child1Control.disable({ emitEvent: false });
        this.child2Control.disable({ emitEvent: false });
        this.child3Control.disable({ emitEvent: false });
        // 可选：同时取消子复选框选中状态
        this.child1Control.setValue(false, { emitEvent: false });
        this.child2Control.setValue(false, { emitEvent: false });
        this.child3Control.setValue(false, { emitEvent: false });
      } else {
        this.child1Control.enable({ emitEvent: false });
        this.child2Control.enable({ emitEvent: false });
        this.child3Control.enable({ emitEvent: false });
      }
    });
  }
}

模板：

<label class="custom-control custom-checkbox" style="display: block">
  <input 
    type="checkbox" 
    class="custom-control-input" 
    id="myCheckbox" 
    [formControl]="mainCheckboxControl"
  >
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">
    <span id="checkboxstart"> </span>
  </span>
</label>

<label class="custom-control custom-checkbox">
  <input 
    type="checkbox" 
    class="custom-control-input" 
    id="child1"
    [formControl]="child1Control"
  >
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">子复选框1</span>
</label>

2. 直接操作DOM（不推荐，但应急可用） #

如果只是简单的临时需求，也可以直接通过@ViewChild获取复选框元素，手动控制状态：

组件类：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('mainCheckbox') mainCheckbox!: ElementRef<HTMLInputElement>;

  handleMainCheckboxToggle() {
    const isChecked = this.mainCheckbox.nativeElement.checked;
    // 直接获取子复选框并控制禁用状态
    document.querySelectorAll('#child1, #child2, #child3').forEach(el => {
      (el as HTMLInputElement).disabled = isChecked;
    });
  }
}

模板：

<label class="custom-control custom-checkbox" style="display: block">
  <input 
    #mainCheckbox
    type="checkbox" 
    class="custom-control-input" 
    id="myCheckbox" 
    name="myCheckbox"
    (change)="handleMainCheckboxToggle()"
  >
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">
    <span id="checkboxstart"> </span>
  </span>
</label>

不过这种直接操作DOM的方式不符合Angular的“数据驱动”理念，除非特殊情况，否则优先用前两种方案。

总结 #

完全可以实现无NgModel的纯UI交互复选框，核心就是通过原生事件监听状态变化，再用属性绑定或表单控件来控制其他元素。如果只是简单的UI交互，第一种原生事件+属性绑定的方案最轻便；如果涉及表单场景，响应式表单会更合适。

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