I am working on a for loop that generates a series of textareas with unique ids using KO data-binding, but they all share the same name. My goal is to utilize Jquery to determine if all the textareas in the list are empty. If they are, I want to disable all text areas except for the first one. Alternatively, if one of the textareas has content, I want to disable the ones with empty values. Here is a snippet of my current code:
Typescript/Jquery
thisMethod(): any {
this.check.subscribe(val => {
if (val === true) {
$("textarea[name='text']").each((i, element) => {
if ($(element).val() === "") {
if (i !== 0) {
$(element).prop('disabled', true);
};
}
else {
// some check for populated textbox to disable unpopulated checkboxes
}
}
}
}
}
HTML
<div data-bind="foreach: choice">
<-- ko if: hasData($data) -->
<div>
<textarea class="form-control" name="text" data-bind="attr: {id: $data + '-choice-text'}, event: {change: $root.anonClass.thisMethod}"></textarea>
</div>
</div>
I'm struggling to understand the behavior of JQuery's .each() function. Does it validate each element individually before moving to the next condition or does it iterate like a traditional for loop?
When testing just the first if block, I notice that nothing seems to happen. This issue may be unrelated to JQuery and could potentially be due to the knockout change event not firing, though I am uncertain.