JavaScript：根据ID包含的短语选择元素并设置属性

当然可以！完全不用重复写那一堆冗余的getElementById代码，这里有几种简洁高效的方法帮你一次性搞定：

方法1：使用CSS属性选择器 + querySelectorAll #

这是最直接通用的方式，利用CSS的属性结尾匹配选择器精准定位所有目标元素，再批量设置只读：

// 选中所有ID以"_ro"结尾的元素
const roFields = document.querySelectorAll('[id$="_ro"]');

// 遍历每个元素设置只读状态
roFields.forEach(field => {
  field.readOnly = true;
});

为什么这么写？ #

• [id$="_ro"]是CSS属性选择器，其中$=表示“以指定字符串结尾”，完美匹配你命名为Field1_ro、Field2_ro这类格式的字段；
• querySelectorAll会返回包含所有匹配元素的NodeList，我们可以直接用forEach遍历处理每个元素，不用手动写循环。

方法2：如果元素都在同一个表单里（可选优化） #

如果这些字段都属于某个特定表单，也可以通过表单的元素集合来筛选处理：

// 假设你的表单ID是"targetForm"
const form = document.getElementById('targetForm');
// 把表单元素转为数组后，筛选出ID以"_ro"结尾的元素
const roFields = Array.from(form.elements).filter(el => el.id.endsWith('_ro'));

roFields.forEach(field => {
  field.readOnly = true;
});

额外小提示 #

如果担心页面中可能存在未加载完成的元素，或者想更严谨一点，可以在设置前加个简单判断（不过querySelectorAll返回的空NodeList执行forEach也不会报错，所以一般不需要）：

roFields.forEach(field => {
  if (field) {
    field.readOnly = true;
  }
});

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