如何在提交/点击后禁用.cshtml中的提交按钮？

你当前的代码混合了原生onclick手动设置禁用状态和Knockout.js的enable绑定，容易出现状态不一致的问题。推荐完全基于Knockout的响应式状态来实现，更可靠且易维护：

步骤1：确保ViewModel中的状态是可观察对象 #

在你的ViewModel里，isSaving必须是Knockout的可观察对象，用来控制按钮状态：

function ViewModel() {
    const self = this;
    self.isSaving = ko.observable(false);

    self.addNewCard = function(data, root) {
        // 点击后立即标记为保存中，禁用按钮
        self.isSaving(true);
        
        // 执行你的保存逻辑（示例为异步请求）
        fetch('/api/add-card', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ /* 提交数据 */ })
        })
        .then(res => res.json())
        .then(() => {
            // 保存成功后的业务逻辑
        })
        .catch(err => {
            // 处理保存失败的情况
            console.error('保存出错:', err);
        })
        .finally(() => {
            // 可选：如果需要允许用户重试，恢复按钮状态
            // 若不需要重试，可移除这行，保持按钮禁用
            self.isSaving(false);
        });
    };
}

ko.applyBindings(new ViewModel());

步骤2：简化按钮的HTML绑定 #

移除原生onclick属性，仅保留Knockout的绑定，让enable绑定自动控制按钮禁用状态：

<button 
    data-bind="enable: !$root.isSaving(), click: $root.addNewCard.bind($data, $root)" 
    class="primary button" 
    role="button" 
    data-size="sm" 
    UseSubmitBehavior="false"
>
    Save
</button>

为什么这样更有效？ #

• 完全基于Knockout的响应式机制，避免手动DOM操作和数据绑定的冲突
• isSaving状态可复用在其他UI反馈（比如显示加载动画）
• 灵活控制按钮是否恢复可用（失败后允许重试或保持禁用）

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