使用Html.DropDownList选中选项时禁用指定文本框的实现方法

步骤1：给下拉菜单添加ID（可选但更方便） #

修改你的Html.DropDownList代码，添加一个id属性，方便JavaScript定位元素：

<div class="row mb-3">
    <label class="col-sm-2 col-form-label">Location</label>
    <div class="col-sm-6">
        @Html.DropDownList("Location", Html.GetEnumSelectList<InventoryAdjustment.Pages.CreateRecordModel.locations>(), "Select Scan Option", new { @class = "form-control", @id = "locationDropdown" })
    </div>
</div>

步骤2：编写JavaScript交互逻辑 #

在页面的@section Scripts块（Razor Pages推荐写法）或者页面底部添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
    // 获取下拉菜单元素
    const locationDropdown = document.getElementById('locationDropdown');
    // 获取需要控制的文本框（替换成你实际的文本框ID）
    const targetTextBox = document.getElementById('targetTextBox');

    // 监听下拉菜单的选择变化事件
    locationDropdown.addEventListener('change', function() {
        const selectedValue = this.value;
        
        // 根据选中值判断是否禁用文本框
        // 示例：当选中枚举值为"Warehouse"时禁用，替换成你的枚举实际值
        targetTextBox.disabled = selectedValue === 'Warehouse';
    });
});

关键说明 #

• 把targetTextBox替换成你页面中需要禁用的文本框ID，比如你的文本框代码是@Html.TextBox("ScanCode", "", new { @id = "targetTextBox" })，就用这个ID。
• 枚举值的字符串形式要和下拉选项的value一致，你可以通过浏览器开发者工具查看下拉选项的value属性，确认枚举对应的实际字符串。
• 如果需要多条件判断，直接扩展逻辑即可，比如：

  targetTextBox.disabled = selectedValue === 'Warehouse' || selectedValue === 'Store';
  

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