угловой материал два флажка, только один может быть отмечен за раз

Я новичок в Angular-material, поэтому этот вопрос может показаться немного глупым, но, пожалуйста, потерпите меня.

У меня есть два следующих флажка.

<mat-checkbox>Apply for Job</mat-checkbox>
<mat-checkbox>Modify a Job</mat-checkbox>

Предположим, пользователь установил первый флажок («Подать заявку на вакансию»), а затем щелкнул флажок «Изменить задание», я хочу, чтобы приложение автоматически сняло флажок с первого. Как я могу добиться этого без использования переключателей?


typescript javascript angular checkbox angular-material
person A J    schedule 02.03.2018    source источник
comment
Почему вам не нужны радиокнопки, элемент html, специально разработанный для этой ситуации?   -  person Taplar    schedule 02.03.2018
comment
Потому что всего есть 5 флажков (включая указанные выше), но это только те два флажка, которые нельзя установить вместе. Все другие комбинации отмеченных флажков разрешены.   -  person A J    schedule 02.03.2018
comment
Таким образом, только эти двое будут иметь общее имя.   -  person Taplar    schedule 02.03.2018
comment
Итак .. вы предлагаете назначить общее имя для этих двух флажков, а затем использовать JQuery для выполнения?   -  person A J    schedule 02.03.2018
comment
Радиокнопки с одинаковыми именами и только с основным html исключают выбор друг друга. Нет необходимости в javascript для достижения такого поведения с помощью переключателей.   -  person Taplar    schedule 02.03.2018
comment
Вам нужно поддерживать то, что ни один из этих двух вариантов не выбран, или всегда должен быть один или другой?   -  person G. Tranter    schedule 03.03.2018
comment
@ G.Tranter должен поддерживать то, что ни один из этих двух вариантов не выбран   -  person A J    schedule 08.03.2018

Ответы (1)


arrow_upward
7
arrow_downward

Вы можете поставить условие для отмеченного атрибута, как в этом примере:

Машинопись:

selected=-1;

HTML

<div *ngFor="let item of [1,2,3];  let i = index">
  <mat-checkbox [checked]="selected === i" (change)="selected = i">Check me!</mat-checkbox>
</div>

ДЕМО

person Vega    schedule 02.03.2018