从下拉列表中选择值时如何启用-禁用输入类型=“文本”[关闭]

Question

我有一个下拉列表），其中一个是 input type="text"。如果我从下拉列表中选择 value{2,3} 而不是第一个值，那么我想要什么，那么输入类型将被禁用，如果我再次选择第一个值，那么它将被启用。

Answer 1

假设您有以下 HTML 代码：

<select id='dropdown'>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<input type="text" id="textInput" />

然后您可以对<select> 上的change 事件进行操作，以通过添加事件侦听器来禁用或启用<input>。

由于您使用的是 jQuery（因为您已将 jquery 标签添加到问题中），示例代码可能如下所示：

$('#dropdown').change(function() {
    if( $(this).val() == 1) {
        $('#textInput').prop( "disabled", false );
    } else {       
        $('#textInput').prop( "disabled", true );
    }
});

这是一个有效的小提琴： https://jsfiddle.net/wx38rz5L/2268/

Answer 2

您可以挂钩到选择框的onchange 事件。如果您将第一项设置为某个已知值（如空字符串或“first”或其他），您可以检查当前值并根据该值禁用或启用文本框。

var sel = document.getElementById("sel"), text = document.getElementById("text");

sel.onchange = function(e) {
  text.disabled = (sel.value !== "");
};

<select id="sel">
  <option value="">1</option>
  <option>2</option>
  <option>3</option>
</select>
<input type="text" id="text" />