ASP.NET Core模态框输入框只读切换异常：地址/联系人字段未生效

在ASP.NET Core项目中，开发了一个居民详情Bootstrap模态框，勾选“Modify Information”复选框时，期望所有输入框（包括动态生成的地址、联系人字段）从只读状态切换为可编辑状态，但目前仅居民基本信息输入框生效，地址和联系人输入框仍保持只读。

问题原因 #

核心问题在于原代码中inputsToModify变量是在DOM加载完成时初始化的，此时动态生成的地址、联系人输入框尚未存在，因此这些元素没有被加入到状态切换的集合中。后续调用toggleFieldsReadOnly时，只会操作初始化时已存在的基本信息输入框，无法处理后来动态生成的元素。

修复方案 #

修改toggleFieldsReadOnly函数，每次调用时重新查询所有需要切换状态的输入框，确保包含动态生成的地址和联系人输入框，同时简化选择器逻辑。

修复后的resident.js代码 #

document.addEventListener('DOMContentLoaded', function () {
    var modifyCheckbox = document.getElementById('modifyCheckbox');

    function toggleFieldsReadOnly() {
        var isReadOnly = !modifyCheckbox.checked;
        // 每次调用重新查询所有目标输入框，覆盖静态和动态生成的元素
        var inputsToModify = document.querySelectorAll('input:not([type="checkbox"]):not(#modalAge), select');
        inputsToModify.forEach(function (input) {
            input.readOnly = isReadOnly;
        });
    }

    // 页面加载时初始化字段状态
    toggleFieldsReadOnly();

    // 监听复选框状态变化
    modifyCheckbox.addEventListener('change', function () {
        toggleFieldsReadOnly();
    });
});

$(document).ready(function () {
    $('#residentModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var resident = button.data('resident');

        $('.view-resident-btn').click(function () {
            var residentData = $(this).data('resident');

            // 设置居民基本信息
            $('#modalResidentID').val(residentData.ResidentID);
            $('#modalFirstName').val(residentData.FirstName);
            $('#modalMiddleName').val(residentData.MiddleName);
            $('#modalLastName').val(residentData.LastName);
            $('#modalBirthdate').val(residentData.Birthdate);
            $('#modalAge').val(residentData.Age);
            $('#modalEmail').val(residentData.Email);

            // 渲染地址字段
            var addresses = residentData.Addresses || [];
            var addressInputs = $('#modalAddresses');
            addressInputs.empty();
            addresses.forEach(function (address, index) {
                var addressInput = '<div class="row">'
                addressInput += '<div class="address-group col-md-3 mb-3">';
                addressInput += '<label for="addressType' + index + '">Address Type:</label>';
                addressInput += '<input id="addressType' + index + '" class="form-control" type="text" value="' + address.AddressType + '" readonly>';
                addressInput += '</div>';
                addressInput += '<div class="address-group col-md-3 mb-3">';
                addressInput += '<label for="houseNumber' + index + '">House Number:</label>';
                addressInput += '<input id="houseNumber' + index + '" class="form-control" type="text" value="' + address.HouseNumber + '" readonly>';
                addressInput += '</div>';
                addressInput += '<div class="address-group col-md-3 mb-3">';
                addressInput += '<label for="street' + index + '">Street:</label>';
                addressInput += '<input id="street' + index + '" class="form-control" type="text" value="' + address.Street + '" readonly>';
                addressInput += '</div>';
                addressInput += '<div class="address-group col-md-3 mb-3">';
                addressInput += '<label for="barangay' + index + '">Barangay:</label>';
                addressInput += '<input id="barangay' + index + '" class="form-control" type="text" value="' + address.Barangay + '" readonly>';
                addressInput += '</div>';
                addressInput += '</div>';
                addressInputs.append(addressInput);
            });

            // 渲染联系字段
            var contacts = residentData.Contacts || [];
            var contactList = $('#modalContacts');
            contactList.empty();
            contacts.forEach(function (contact, index) {
                var contactInput = '<div class="row">'
                contactInput += '<div class="col-md-6 mb-3">';
                contactInput += '<label for="contactType' + index + '">Contact Type:</label>';
                contactInput += '<input id="contactType' + index + '" class="form-control" type="text" value="' + contact.ContactType + '" readonly>';
                contactInput += '</div>';
                contactInput += '<div class="address-group col-md-6 mb-3">';
                contactInput += '<label for="contactNumber' + index + '">Contact Number:</label>';
                contactInput += '<input id="contactNumber' + index + '" class="form-control" type="text" value="' + contact.ContactNumber + '" readonly>';
                contactInput += '</div>';
                contactInput += '</div>';
                contactList.append(contactInput);
            });

            // 动态生成字段后同步复选框状态
            toggleFieldsReadOnly();
        });
    });
});

关键修改点 #

1. 移除初始化时的静态元素集合，改为每次调用toggleFieldsReadOnly时重新查询DOM，确保包含所有动态生成的输入框
2. 简化选择器，直接排除复选框和年龄输入框，覆盖所有目标元素
3. 保持模态框渲染后的状态同步逻辑不变

问题截图 #

• 初始只读状态：
• 勾选修改后地址仍只读：

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