如何基于ViewModel中的值控制按钮的启用与禁用？

嗨，你可以通过两种实用的方式实现这个需求，一种是服务器端直接渲染控制（适合初始加载时的状态设置，代码更简洁），另一种是客户端JS动态控制（如果后续需要动态变更按钮状态也适用），具体方案如下：

方法一：服务器端Razor语法直接控制 #

既然你已经把locationsHistoryVM传递到了视图，那可以直接用Model.IsOpen的值来决定按钮的disabled属性是否存在。HTML里只要disabled属性存在，按钮就会被禁用，所以我们可以通过条件判断来输出这个属性：

修改你的按钮代码：

<div class="col-md-12 text-center">
    <button type="submit" value="Create" class="btn bgm-orange waves-effect mybtn" id="LocateSubmitButton" 
            @if (!Model.IsOpen) { <text>disabled</text> }>
        SAVE
    </button>
</div>

或者用更简洁的三元表达式写法：

<div class="col-md-12 text-center">
    <button type="submit" value="Create" class="btn bgm-orange waves-effect mybtn" id="LocateSubmitButton" 
            @(!Model.IsOpen ? "disabled" : "")>
        SAVE
    </button>
</div>

• 当Model.IsOpen为true时，按钮不会输出disabled属性，自动处于启用状态；
• 当Model.IsOpen为false时，按钮会带上disabled属性，保持禁用状态。

方法二：客户端JavaScript动态控制 #

如果后续有需要通过JS动态修改按钮状态的场景，可以先把IsOpen的值存在隐藏字段，再用JS读取并设置按钮状态：

1. 在视图中添加一个隐藏字段，存储ViewModel的IsOpen值：

<input type="hidden" id="IsOpenFlag" value="@Model.IsOpen" />

2. 添加JavaScript代码（放在页面底部或者DOM加载完成的回调里）：

// 等待页面DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 注意Razor输出的布尔值是字符串"True"/"False"，需要转成布尔类型
    const isEnabled = document.getElementById('IsOpenFlag').value === 'True';
    const submitButton = document.getElementById('LocateSubmitButton');
    
    // 设置按钮禁用状态：isEnabled为true则启用（disabled=false），否则禁用
    submitButton.disabled = !isEnabled;
});

要是你用jQuery的话，代码可以更简洁：

$(function() {
    const isEnabled = $('#IsOpenFlag').val() === 'True';
    $('#LocateSubmitButton').prop('disabled', !isEnabled);
});

两种方法都能完美解决你的需求，推荐第一种服务器端的方式，因为它更直接，不需要额外的JS代码，适合初始加载时的状态控制。

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