Angular 2 - Handle click on disabled input

Question

This is what I have right now. Trying to call the checkToEnable function.

<input type="text" ([ngModel])="city.arr.date" [id]="city.id+'_arr_date'" [name]="city.id+'_arr_date'" [attr.disabled]="selectedTripType=='OT' ? true : null" class="input-icon-date input-default-last  form-control" (click)="checkToEnable()" placeholder="Return Date"/>

May be click is not triggered for disabled. Try (mousedown)="checkToEnable()" — Saurabh Tiwari
– Saurabh Tiwari, Commented Oct 24, 2017 at 5:35
Then may be you need not use disabled. Rather try to imitate a disabled css. — Saurabh Tiwari
– Saurabh Tiwari, Commented Oct 24, 2017 at 5:43

Vivek Doshi · Accepted Answer · 2019-08-08 13:28:28Z

20

Disabled elements don't fire mouse events. Most browsers will propagate an event originating from the disabled element up the DOM tree, so event handlers could be placed on container elements.

But you can achieve it by this way :

Component Side:

disableTextbox =  false;

toggleDisable() {
    this.disableTextbox = !this.disableTextbox;
}

Template side :

<div (click)='toggleDisable()'>
  <input [disabled]='disableTextbox' >
</div>

WORKING DEMO

edited Aug 8, 2019 at 13:28

answered Oct 24, 2017 at 5:40

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vivek Doshi Over a year ago

@Lasitha, glad to know that :) .

Zhu Over a year ago

@VivekDoshi can you please help me to solve this stackoverflow.com/questions/52272192/…

netalex Over a year ago

seems that it does'nt works with buttons: toggleDisable() click fires when user clicks outside the button.

Random Over a year ago

Brilliant, didn't expect such a simple solution !

Edminsson Over a year ago

This solution does not seem to work on Firefox. I'm running version 89.0.

sleidig · Accepted Answer · 2024-02-06 10:28:53Z

1

You can use css of an element inside a disabled input / form-field and re-activate the click events for that by adding css pointer-events: all;

answered Feb 6, 2024 at 10:28

sleidig

1,46215 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular 2 - Handle click on disabled input

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related