How to make checkbox remain disabled if other control doesnt have value and enable if control has value in angular8

Question

i have a checkbox fiels, where in i want to enable checkbox if the other control has value. here i have 2 controls amount and update received. If update Received control has value in it, then user must be allowed to make checkin/checkout in the amount field. If update requested control is empty/null then the amount checkbox must remain disabled and shouldnt allow user to checkin/checkout.

DEMO: DEMO

TS:

initEoForm() { this.eoInfoForm = this.FB.group({ amount: ['', Validators.required], updateRequested:[''] }); } public disableUpdate() { let disabled = true; if (this.eoInfoForm.value.updateRequested) { disabled = false; return false; } return disabled; }

HTML:

<form [formGroup]="eoInfoForm"> <div class="row"> <div class="col"> <div class="custom-control custom-switch"> {{disableUpdate()}} <input type="checkbox" class="custom-control-input" id="noNewBusiness" formControlName="amount" disabled="disableUpdate()"> <label class="custom-control-label" for="noNewBusiness">Update Received</label> </div> </div> </div> </form>

In order to see whether i get true or false value in html, i tried to check value {{disableUpdate()}}. It is giving true or false values accordingly but even though i get true i am not able to checkin/checkout.

Did u solve with my suggestion?

CaneRandagio
– CaneRandagio

2020-05-01 07:42:06 +00:00
Commented May 1, 2020 at 7:42 — CaneRandagio
– CaneRandagio, Commented May 1, 2020 at 7:42

CaneRandagio · Accepted Answer · 2020-05-02 14:41:28Z

1

I tweaked it a little bit but I did it. You need setAttribute () and removeAttribute (). I like to avoid if blocks, I prefer the ternary operator.

typing(event){ let checkBox = document.getElementById('noNewBusiness') event.target.value == '' ? checkBox.setAttribute('disabled', 'true') : checkBox.removeAttribute('disabled') }

stackblitz

edited May 2, 2020 at 14:41

answered Apr 30, 2020 at 17:33

CaneRandagio

3783 silver badges16 bronze badges

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

11 Comments

Bhrungarajni Over a year ago

i am not able to open this link, could you please post full answer or provide link again?

Bhrungarajni Over a year ago

here, i want the checkbox to be enabled, if there is value in updateReceived field by default and not by typing.Can you please edit answer and send?

CaneRandagio Over a year ago

Maybe you mean you want the checkbox checked if there is text in the textbox? In case you only want the checkbox enabled, this is the way to enable and / or disable it, using the change event of the textbox

CaneRandagio Over a year ago

I ll provide to fix the url

Bhrungarajni Over a year ago

I used your solution and tried and got fix, can you please validate once?stackblitz.com/edit/angular-36xexh?file=src/app/…

|

Collectives™ on Stack Overflow

How to make checkbox remain disabled if other control doesnt have value and enable if control has value in angular8

1 Answer 1

11 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Related