JavaScript实现Unicast选中时文本框只读置灰功能异常求助

代码存在三个直接触发异常的问题：

• 变量名拼写错误：通过getElementById获取到的sourceIp节点被赋值给srcIp变量（驼峰命名，大写I，无数字后缀），但后续Unicast分支、隐藏分支中全部误写为srcip1（小写ip加数字1后缀），JS无法识别该变量，对应属性设置逻辑完全未执行，显示状态残留导致异常。
• Unicast分支缺失显示逻辑：仅在Multicast分支中设置了srcIp.style.display = ''让文本框可见，Unicast分支未处理display属性，若上一状态文本框为隐藏，切换到Unicast时自然不会展示。
• 原生readOnly属性默认不自带置灰样式，仅设置只读属性不会自动出现置灰视觉效果，需要自定义CSS规则实现。

首先添加只读态的置灰样式，用CSS伪类匹配即可，不需要手动操作样式：

#sourceIp:read-only {
  background-color: #f5f5f5;
  color: #8c8c8c;
  cursor: not-allowed;
}

修复后的JS逻辑，统一变量名，补全状态处理，同时绑定相关事件避免切换时状态不同步：

const toggler = document.getElementsByName("currentEntry.enableCB");
const srcIp = document.getElementById("sourceIp");
const input_stream_type = document.getElementsByName("currentEntry.streamType")[0];

function updateSourceIpState() {
  if (toggler[0].checked) {
    // 勾选状态下默认展示文本框，再根据流类型调整编辑权限
    srcIp.style.display = '';
    if (input_stream_type.value === 'Multicast') {
      // 组播场景：可编辑，清空默认内容
      srcIp.readOnly = false;
      srcIp.value = '';
    } else {
      // 单播场景：设置只读
      srcIp.readOnly = true;
    }
  } else {
    // 未勾选状态隐藏文本框，重置只读属性避免下次展示状态异常
    srcIp.style.display = 'none';
    srcIp.readOnly = false;
  }
}

// 绑定触发事件：复选框切换、流类型切换时都更新状态
toggler[0].addEventListener('change', updateSourceIpState);
input_stream_type.addEventListener('change', updateSourceIpState);
// 页面初始化时执行一次，保证初始加载状态正确
updateSourceIpState();

• 操作readOnly属性直接通过DOM对象属性赋值element.readOnly = true/false即可，不需要用setAttribute，避免属性名大小写、属性值书写错误导致的异常。
• 不要把置灰样式硬编码在JS逻辑里，通过CSS:read-only伪类自动匹配状态，维护成本更低，也不会出现样式和状态不同步的问题。
• 必须给流类型选择器也绑定状态更新事件，否则用户勾选复选框后再切换流类型，文本框状态不会同步更新。

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