如何实现date输入框默认禁用，选中Deadline选项后启用？求助

嘿，我来帮你搞定这个小问题！你的思路完全没问题，但问题出在事件绑定的位置上——<option>标签的onselect事件并不是用来监听选项选择的正确方式，我们应该把监听逻辑放在<select>元素的change事件上，这才是下拉选择时会触发的标准事件。

为什么原来的代码不生效？ #

当用户在下拉框中选择选项时，浏览器会触发<select>的change事件，而不是单个<option>的onselect事件，所以你绑定在选项上的代码根本不会被执行。

正确的实现方式 #

这里有两种简洁的解决方案，你可以根据自己的习惯选择：

方式1：使用事件监听器（推荐，更易维护）

先调整HTML结构，给下拉框加上ID方便获取：

<select id="frequency-select">
  <option value="deadline">Deadline date</option>
  <option value="monthly">Monthly</option>
</select>
<input id="deadline" type="date" disabled>

然后添加JavaScript逻辑：

// 获取元素
const selectBox = document.getElementById('frequency-select');
const deadlineInput = document.getElementById('deadline');

// 监听下拉框的change事件
selectBox.addEventListener('change', function() {
  // 当选中的是Deadline选项时，启用输入框；否则禁用
  deadlineInput.disabled = this.value !== 'deadline';
});

方式2：内联事件（快速实现）

如果想保持代码紧凑，也可以直接在<select>上绑定onchange事件：

<select onchange="document.getElementById('deadline').disabled = (this.value !== 'deadline');">
  <option value="deadline">Deadline date</option>
  <option value="monthly">Monthly</option>
</select>
<input id="deadline" type="date" disabled>

额外说明 #

这两种方式都会实现：默认禁用日期输入框，当用户选中"Deadline date"时自动启用；如果用户切换回"Monthly"，输入框会再次被禁用，逻辑更完整。

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