Which event of the component or hbs file is good for initializing the readonly features for some textboxes

#1

Hi, I have few textboxes in my hbs component, which remaining values for a Total, when the total is - remaining values total is 0 I want to make those textboxes of the hbs component as readonly. This is hbs file which loads part of main hbs file of Single page.

These remaining amounts first loads from the Server, then if the remaining amount is 0 then I want to make all those textboxes readonly or if when an amount entered in any of the textboxes I am calculating the sum of the textboxes on the blur event then also I want to make all those textboxes to be readonly, any suggestions please, I am new to Ember and I am new for the JavaScript coding - thank you so much and thanks in advance.

#2

Sounds like you just need to use the disabled attribute on your <input>s (assuming that’s what you mean by “textbox”).

The easiest way to do this would be to have one or more computed properties that return a boolean for when/if the inputs should be disabled. for example you could make a CP named remainingIsZero and maybe have another one called remainingCalculating (i assume this is an async calculation? if not there’s probably no reason to do disable the inputs while calculating). Then in your template you could just say something like:

<input ... disabled={{or this.remainingIsZero this.remainingCalculating}} ... />

(where the or helper is coming from ember-truth-helpers).

This is just one way you could accomplish what you want, there are a number of different approaches you could take and it’s hard to tell what makes the most sense without seeing your code. The point is you just need to disable the inputs when certain conditions are true, and those conditions can probably be managed as computed properties.