选择select下拉框Option1后禁用input1的JavaScript实现方法

实现代码 #

你可以直接在页面中插入以下原生JavaScript代码，无需引入任何第三方库即可实现需求：

document.addEventListener('DOMContentLoaded', function() {
  // 匹配你HTML中的下拉选择框和目标输入框
  const select = document.querySelector('select[name="foo"]');
  const targetInput = document.querySelector('input[name="input1"]');

  // 切换输入框禁用状态的逻辑
  const updateInputState = () => {
    targetInput.disabled = select.value === 'option1';
  };

  // 初始化执行一次，处理页面默认选中Option1的场景
  updateInputState();
  // 绑定下拉框变化事件，每次切换选项都更新状态
  select.addEventListener('change', updateInputState);
});

说明 #

• 代码通过DOMContentLoaded事件确保DOM元素加载完成后再执行选择和绑定操作，避免出现元素找不到的报错
• 初始化执行一次状态更新逻辑，覆盖页面刚加载时下拉框默认选中Option1的场景，不会出现初始状态不符合预期的问题
• 直接对disabled属性赋值布尔值的写法符合Web标准，比手动增删属性的写法更简洁可靠

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