如何用jQuery/TypeScript在KnockoutJS循环的textarea中禁用指定文本域？

关于jQuery.each()的执行逻辑 #

jQuery的.each()方法就是普通的迭代执行，和原生for循环逻辑完全一致：拿到匹配的DOM元素集合后，按顺序逐个遍历，每次迭代就执行你传入的回调函数，不存在“先验证所有元素再统一执行”的情况。

代码逻辑与事件触发问题解决 #

1. Knockout change事件未触发的修复 #

你的textarea绑定了change事件，但该事件默认在元素失去焦点时才触发。如果需要实时响应输入，建议替换为input事件：

<textarea class="form-control" name="text" 
          data-bind="attr: {id: $data + '-choice-text'}, 
                     event: {input: $root.anonClass.thisMethod}"></textarea>

另外要确认$root.anonClass.thisMethod的上下文是否正确——Knockout事件绑定中this默认指向当前绑定的ViewModel，若thisMethod属于anonClass，需确保anonClass是$root的有效属性，也可以用箭头函数或.bind()固定方法内部的this指向。

2. 修正核心逻辑代码 #

现有代码只处理了“全为空时禁用非第一个空textarea”的场景，未实现“有任一填写时禁用所有空textarea”的逻辑。建议先统一判断整体状态，再批量处理DOM元素：

thisMethod(): void {
    const $textareas = $("textarea[name='text']");
    // 判断是否有任一textarea已填写（排除纯空格的情况）
    const hasFilled = $textareas.toArray().some(el => $(el).val().trim() !== "");

    $textareas.each((i, element) => {
        const $el = $(element);
        const isEmpty = $el.val().trim() === "";
        
        if (hasFilled) {
            // 存在已填写内容，所有空textarea禁用
            $el.prop('disabled', isEmpty);
        } else {
            // 全部为空，仅禁用非第一个的空textarea
            $el.prop('disabled', isEmpty && i !== 0);
        }
    });
}

注意：

• 用.trim()过滤纯空格输入，避免误判
• 先统一计算hasFilled状态，再遍历处理，逻辑更清晰
• 若this.check.subscribe是控制逻辑开关的，可保留订阅，但需确保check的状态更新正确

3. Knockout MVVM优化建议 #

既然使用Knockout，建议尽量避免直接操作DOM，改用ViewModel状态绑定：

// 定义单个选项的ViewModel
class ChoiceItem {
    text = ko.observable("");
    disabled = ko.observable(false);
}

// 在根ViewModel中计算整体状态
this.hasFilled = ko.pureComputed(() => {
    return this.choice().some(item => item.text().trim() !== "");
});

// 为每个选项绑定禁用逻辑
this.choice().forEach((item, index) => {
    item.disabled = ko.pureComputed(() => {
        const isEmpty = item.text().trim() === "";
        return this.hasFilled() ? isEmpty : (isEmpty && index !== 0);
    });
});

对应的HTML绑定：

<div data-bind="foreach: choice">
    <!-- ko if: hasData($data) -->
    <div>
        <textarea class="form-control" name="text" 
                  data-bind="attr: {id: $data + '-choice-text'}, 
                             value: text, 
                             disable: disabled"></textarea>
    </div>
    <!-- /ko -->
</div>

这种方式符合MVVM思想，减少DOM操作，逻辑更易维护。

内容的提问来源于stack exchange，提问作者Juulu