Как отключить флажок в зависимости от условий в angular 6?

Мой html-код,

<div>
  <div>
   <input type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">
   <label class="label" for="Checkbox0" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox1" name="cCheckbox1" class="custom-control-input" (change)="checkSelected(checkBox[1].label)">
   <label class="label" for="Checkbox1" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox2" name="cCheckbox2" class="custom-control-input" (change)="checkSelected(checkBox[2].label)">
   <label class="label" for="Checkbox2" >first</label>
  </div>
</div>


 <div>
  <div>
   <input type="checkbox" id="Checkbox3" name="cCheckbox3" class="custom-control-input" (change)="checkSelected(checkBox[3].label)">
   <label class="label" for="Checkbox3" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox4" name="cCheckbox4" class="custom-control-input" (change)="checkSelected(checkBox[4].label)">
   <label class="label" for="Checkbox4" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox5" name="cCheckbox5" class="custom-control-input" (change)="checkSelected(checkBox[5].label)">
   <label class="label" for="Checkbox5" >first</label>
  </div>
</div>

Точно так же у меня есть еще два отдельных div в том же html-файле, который содержит флажки. Что мне нужно сделать, так это щелкнуть первый флажок в первом div, мне нужно отключить все остальные флажки из первого div, второго div и третьего.

Поскольку я совершенно новичок в angular, я понятия не имею, как отключить здесь. Я пытался использовать ng-disabled, но, похоже, он не работает. Может кто-то помочь мне с этим?


angular checkbox html disable angular6
person sai    schedule 09.08.2018    source источник
comment
Попробуйте [disabled]. ng-disabled — это синтаксис AngularJS.   -  person John Montgomery    schedule 09.08.2018

Ответы (5)


arrow_upward
13
arrow_downward

ng-disabled — это синтаксис AngularJS. Вы можете использовать ввод [disabled] для отключения флажков.

<input [disabled]="isDisabled" = type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">

in .ts isDisabled : boolean;

Факультативная вещь

Вы можете использовать Angular Material для своих разработок. потому что у него много преимуществ. А также имеет четко определенный API.

<mat-checkbox> обеспечивает ту же функциональность, что и родной <input type="checkbox">, но дополненный стилями и анимацией в стиле Material Design.

Угловой материал

person darkz    schedule 09.08.2018

arrow_upward
15
arrow_downward

Для Angular 2+ вы можете включить/отключить флажок, установив атрибут disabled для input type=checkbox

Использование: [attr.disabled]="isDisabled ? true : null"

Обратите внимание, что только [attr.disabled]="isDisabled не будет работать. Вам нужно будет явно установить отключенный атрибут на null для удаления отключенного атрибута из отключенного флажка.

<input type="checkbox" [attr.disabled]="isDisabled ? true : null" />
person akhouri    schedule 03.07.2020
comment
Нужен null. Странно, что false не смог снова установить флажок - person brt; 21.01.2021

arrow_upward
3
arrow_downward

Для более крупных и сложных форм я настоятельно рекомендую использовать реактивную форму. В реактивной форме вы можете использовать [disabled]="condition", где условие похоже на whateverCheckbox.value.

ОБНОВЛЕНИЕ: я обновил свой ответ, чтобы использовать whateverCheckbox.value вместо whateverCheckbox.checked. Этот подход работает только с реактивными формами. Я настоятельно рекомендую использовать реактивные формы для более крупных и сложных форм, где вам может потребоваться более подробный персонализированный контроль над элементами формы. Реактивные формы построены вокруг наблюдаемых потоков, где входные данные и значения формы предоставляются как потоки входных значений, а также предоставляют вам синхронный доступ к данным.

Вот документация: https://angular.io/guide/reactive-forms

После того, как вы настроили форму как реактивную форму, элемент управления формы создан и привязан к элементу формы ввода флажка, вы сможете получить доступ к значению флажка, как указано выше.

ОБНОВЛЕНИЕ 2: вам не обязательно использовать форму, чтобы воспользоваться реактивным элементом управления формой.

В файле component.ts импортируйте FormControl из @angular/forms, как показано ниже:

import { FormControl } from '@angular/forms';

Затем объявите элемент управления формой в классе компонента как таковой:

checkbox1 = new FormControl('');

Затем в своем шаблоне просто привяжите этот FormControl к элементу ввода как таковому:

<input type="checkbox" [formControl]="checkbox1">

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

checkbox1.value
person Mr Shantastic    schedule 09.08.2018
comment
[disabled]=Checkbox1.checked условие не работает @Mr Shantastic - person sai; 10.08.2018
comment
Извините, я привык использовать реактивные формы. Я считаю, что этот подход работает с реактивными формами. Реактивные формы настоятельно рекомендуются для более крупных и сложных форм. Реактивные формы обеспечивают большую предсказуемость благодаря синхронному доступу к модели данных, неизменности с наблюдаемыми операторами и отслеживанию изменений через наблюдаемые потоки. Я скоро обновлю свой ответ этой информацией. - person Mr Shantastic; 10.08.2018

arrow_upward
2
arrow_downward

Вы можете использовать атрибут [disable] в теге input[type="checkbox"].

Например: -

<input [disabled]="isDisabled" type="checkbox" id="Checkbox3" name="cCheckbox3" class="custom-control-input" (change)="checkSelected(checkBox[3].label)">

isDisabled будет содержать логическое значение в вашем .ts

person Yashwardhan Pauranik    schedule 09.08.2018

arrow_upward
0
arrow_downward

Если вы используете реактивные формы, вы также можете отключить флажок в компоненте, подобном этому.

import { FormBuilder, FormGroup } from '@angular/forms';

constructor(private _fb: FormBuilder) { }

myForm: FormGroup;

ngOnInit(): void {
 this.myForm = this._fb.group({
   myCheckBoxInput: [{value: 1, disabled: true}],
 });
}
person Winnipass    schedule 04.03.2020