primeng - 一次只選擇一個復選框項

Question

是否可以將primeng的復選框模塊配置為選擇框 ，例如，用戶一次只能選擇一個復選框？

我的組件：

<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)]="selectedCities" inputId="ny"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group1" value="San Francisco" label="San Francisco" [(ngModel)]="selectedCities" inputId="sf"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group1" value="Los Angeles" label="Los Angeles" [(ngModel)]="selectedCities" inputId="la"></p-checkbox></div>
</div>

工作stackblitz的例子 。

Answer 1

我建議，如果你想要一個行為類似於selectbox的組件，請使用primeng的RadioButton組件。 另一方面，您也可以更改chceckbox的行為：

• 您需要在每個復選框組件上使用onChange()事件來了解用戶何時單擊您的復選框。
• 用戶單擊復選框后，您需要存儲當前元素。 在你的情況下，它是const latestCity = this.selectedCities[this.selectedCities.length - 1]; 。 由於復選框項目作為字符串值存儲在數組中，因此當前所選項目是該數組的最后一個元素。

• 最后，您需要清空數組並將最后選擇的項目推入該空數組：

  this.selectedCities.length = 0;

  this.selectedCities.push(latestCity);

編輯stackblitz 。