如何配置PrimeNG Checkbox组件实现单选功能？

PrimeNG的<p-checkbox>组件本身是为多选场景设计的，但如果需要实现外观是复选框但一次只能选中一个的效果，我们可以通过手动控制选中状态来实现，下面给你两种可行的方案：

方案一：利用ngModel绑定单个值 + onChange事件 #

这种方法通过将所有复选框绑定到同一个单个变量（而非数组），并在点击事件中控制选中状态，确保只有当前点击的选项被保留。

修改后的模板代码 #

<div class="ui-g" style="width:250px;margin-bottom:10px">
  <div class="ui-g-12">
    <p-checkbox 
      name="group1" 
      value="New York" 
      label="New York" 
      [(ngModel)]="selectedCity" 
      inputId="ny"
      (onChange)="handleCheckboxSelect($event, 'New York')"
    ></p-checkbox>
  </div>
  <div class="ui-g-12">
    <p-checkbox 
      name="group1" 
      value="San Francisco" 
      label="San Francisco" 
      [(ngModel)]="selectedCity" 
      inputId="sf"
      (onChange)="handleCheckboxSelect($event, 'San Francisco')"
    ></p-checkbox>
  </div>
  <!-- 可以继续添加更多选项 -->
</div>

组件类（TS）代码 #

// 单个变量存储选中的城市，而非数组
selectedCity: string;

handleCheckboxSelect(event: any, cityValue: string) {
  // 如果当前复选框被选中，更新选中值
  if (event.checked) {
    this.selectedCity = cityValue;
  } else {
    // 可选：如果取消选中，清空选中值（根据你的需求决定是否保留这部分）
    this.selectedCity = null;
  }
}

原理：当用户点击某个复选框时，onChange事件触发，我们判断当前复选框是否被选中，如果是就将selectedCity设为当前值——因为所有复选框都绑定到这个变量，其他复选框会自动取消选中状态。

方案二：手动控制checked状态 + 点击事件 #

如果你不想用ngModel，也可以直接通过[checked]指令控制复选框的选中状态，结合点击事件切换值：

模板代码 #

<div class="ui-g" style="width:250px;margin-bottom:10px">
  <div class="ui-g-12">
    <p-checkbox 
      name="group1" 
      value="New York" 
      label="New York" 
      [checked]="selectedCity === 'New York'"
      inputId="ny"
      (click)="toggleCitySelection('New York')"
    ></p-checkbox>
  </div>
  <div class="ui-g-12">
    <p-checkbox 
      name="group1" 
      value="San Francisco" 
      label="San Francisco" 
      [checked]="selectedCity === 'San Francisco'"
      inputId="sf"
      (click)="toggleCitySelection('San Francisco')"
    ></p-checkbox>
  </div>
</div>

组件类（TS）代码 #

selectedCity: string;

toggleCitySelection(cityValue: string) {
  // 如果当前城市已选中，取消选中；否则设置为选中
  this.selectedCity = this.selectedCity === cityValue ? null : cityValue;
}

这种方式更直观，直接通过点击事件切换选中值，[checked]指令会自动同步所有复选框的状态。

注意事项 #

• 记得把原来绑定的数组（比如你代码里的selectedCities）改成单个变量，因为单选场景只需要存储一个值。
• 如果不需要允许用户取消所有选中项，可以去掉代码中清空selectedCity的逻辑，强制用户必须选中一个选项。

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