Блог

Главная - Вопросы по программированию - как отключить div при нажатии флажка

как отключить div при нажатии флажка

#typescript #angular-material #aurelia

#typescript #angular-материал #aurelia

Вопрос:

у меня есть следующий флажок

 <md-checkbox checked.bind="addEventCommand.allDay" change.delegate="allday()">All Day</md-checkbox>

когда вышесказанное верно, я хочу отключить div ниже

 <div class="row" >
<md-input label="Start DateTime" value.bind="addEventCommand.startTime" ></md-input> 
<md-input label="End DateTime" value.bind="addEventCommand.endTime"></md-input>
</div>

я знаю, что в javascript я мог бы просто получить элемент и отключить его. я не уверен, как это сделать в angular materialize и typescript

я добавил это в свой typescript

 allday() {
        if (this.addEventCommand.allDay === true) {
            
        }
        
    }

я пробовал это

  <md-checkbox  ref="addEventCommand.allDay.check"checked.bind="addEventCommand.allDay" >All Day</md-checkbox>

и в div я попытался

 <div class="row" disabled.bind="addEventCommand.allDay.check.checked"></div>

но это ничего не делает

Ответ №1:

Добавьте ngModel к флажку, затем скройте его с помощью ngIf

 <div *ngIf="toShow"> 
My content
</div>

<input type="checkbox" [(ngModel)]="toShow">

ts

 toShow = true;

Комментарии:

1. спасибо, это помогло, но вместо того, чтобы использовать *ngIf=»Тошоу», я использовал if.bind=»Тошоу», а в ts я сделал следующее: toShow = true; setDisabled() { this. Тошоу = !это. Тошоу; }

Ответ №2:

Элементы ввода имеют отключенное свойство, такое как флажок, ввод текста и т.д. Элемент Div не является элементом ввода, поэтому у него нет отключенного свойства.

Решение заключается в создании простого CSS-класса с именем disabled

 .disabled {
  background: gray;
  pointer-events: none;
}

И в вашем HTML:

 <div class="row" [class.disabled]="addEventCommand.allDay.check.checked"></div>