基于条件使用JavaScript集合设置元素readonly属性的问题排查与实现

我现在遇到两个棘手的问题，想实现根据元素文本内容（包含“Disbursed”或“Pending Disbursement”）给指定输入框设置readonly属性，但卡壳了：

• 能正常选中包含“Disbursed”的元素，但完全选不到带“Pending Disbursement”的元素，怀疑是两个单词之间的空格或者文本前后的空白导致的；
• 不确定怎么在满足条件时，把所有class为req-amount-input的元素设为不可编辑。

以下是我目前写的代码：

var statusClassCollection = document.getElementsByClassName('req-status');
var textContent_criteria = ['Disbursed', 'Pending Disbursement'];
var approvedReqsCollection = Array.prototype.filter.call(
    statusClassCollection,
    ({ textContent }) => textContent_criteria.includes(textContent)
);
for (j = 0; j < approvedReqsCollection.length; j++) {
    var amountsClassCollection = document.getElementsByClassName("req-amount-input");
    for (i = 0; i < amountsClassCollection.length; i++) {
        amountsClassCollection[i].readonly = true;
        amountsClassCollection[i].editReqAmount = function() {
            return false;
        };
    }
}

问题1：无法匹配“Pending Disbursement”文本的原因和修复 #

你猜的没错，大概率是文本的空白问题——实际页面中元素的textContent可能包含前后空格、换行或者多个连续空格（比如渲染时的排版空格），而你用的是严格的匹配逻辑（要求textContent和数组项完全一致），自然匹配不到。

修复方法是先清理文本的前后空白，然后用“包含”的逻辑判断，而不是严格相等：

• 用trim()去掉文本前后的空白字符；
• 用Array.some()遍历条件数组，只要文本包含任一条件就算匹配成功。

问题2：批量设置输入框readonly的优化 #

你的现有逻辑是找到符合条件的状态元素后，遍历所有输入框设置readonly，但可以优化DOM查询的时机（不要在循环里重复查询），同时规范readonly的设置方式（DOM属性是readOnly，注意大写O，HTML属性是readonly）。

修改后的完整代码 #

// 获取所有状态元素，用querySelectorAll更灵活，返回的NodeList方便处理
const statusElements = document.querySelectorAll('.req-status');
// 定义需要匹配的文本条件
const targetTexts = ['Disbursed', 'Pending Disbursement'];

// 过滤出符合条件的状态元素
const matchedStatusElements = Array.from(statusElements).filter(element => {
    // 清理文本前后空白，避免排版空格干扰匹配
    const cleanedText = element.textContent.trim();
    // 只要文本包含任一目标条件，就返回true
    return targetTexts.some(text => cleanedText.includes(text));
});

// 只有当存在符合条件的元素时，才设置输入框为只读
if (matchedStatusElements.length > 0) {
    // 一次性获取所有金额输入框
    const amountInputs = document.querySelectorAll('.req-amount-input');
    // 用forEach循环更简洁
    amountInputs.forEach(input => {
        // 设置DOM的readOnly属性（规范写法，大写O）
        input.readOnly = true;
        // 同时设置HTML属性，确保兼容性
        input.setAttribute('readonly', 'readonly');
        // 只有当editReqAmount是函数时才覆盖，避免报错
        if (typeof input.editReqAmount === 'function') {
            input.editReqAmount = () => false;
        }
    });
}

关键修改点说明： #

1. 用querySelectorAll替代getElementsByClassName：前者返回的NodeList不会动态更新，避免循环中意外的DOM变动影响结果，而且可以直接用Array.from转成数组，操作更方便；
2. 文本匹配逻辑优化：trim()清理前后空白，some()+includes()实现“包含任一条件”的判断，解决了空格导致的匹配失败；
3. DOM查询优化：把获取输入框的操作移到条件判断之后，避免不必要的DOM查询；
4. 规范readonly设置：同时设置DOM属性和HTML属性，确保在不同浏览器下都能生效；
5. 安全覆盖自定义方法：先判断editReqAmount是否为函数，再覆盖，避免不存在该方法时出现错误。

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