В настоящее время я работаю над проектом, в котором пользователь должен выбирать между несколькими различными кнопками, и он решит, что будет отображаться дальше, чтобы помочь им в обход веб-сайта.
Проблема возникает, когда я хочу, чтобы другие кнопки были серыми в зависимости от того, что выбрал пользователь. Затем, если пользователь допустил ошибку и щелкнул одну из других кнопок, то должно произойти то же самое, а остальные кнопки стали серыми, как показано на рисунке:
Прямо сейчас метод, который я использую, полностью отключает другие кнопки, так что пользователь может сделать только один выбор, и если он делает неправильный выбор, он должен перезагрузить страницу, чтобы изменить свой вариант.
Это HTML-код для кнопок:
<button class="typeInvestorSelect" (click)="personalInvestor()" [disabled]="personalButtonDisabled">Personal</button>
<button class="typeInvestorSelect" (click)="institutionalInvestor()" [disabled]="institutionalButtonDisabled">Insitutional</button>
Объяснение для HTML:
Класс предназначен только для стайлинга. Функция в компоненте изменяет логическое значение для другой кнопки на true, чтобы она была отключена, см. Ниже:
personalInvestor() {
this.institutionalButtonDisabled = true;
}
institutionalInvestor() {
this.showInstitutionalInvestorItems = true;
this.personalButtonDisabled = true;
}
Из моего исследования я видел, что переключатели, кажется, имеют только входы с флажками. У меня много этих кнопок с множественным выбором, и поэтому метод, который я использовал выше, просто создает слишком много беспорядка со всеми логическими значениями. Есть ли другой способ сделать это так, как работают переключатели? У меня также есть бутстрап, если это сработает?
Любые предложения приветствуются, заранее спасибо.