Javascript 基于文本字段值动态禁用选择菜单

当用户开始在文本字段中键入时，我希望能够禁用页面上的选择菜单。这是因为文本字段是输入数据的另一种方式，禁用下拉菜单将有助于使其更清晰

我知道我可以用这个：

<select name="specialty" id="specialty" disabled="disabled">

永久禁用select，但当文本字段的值更改时，是否有方法动态分配该属性？我知道没有css属性可以像文本输入和文本区域那样进行操作

我发现了一个JQuery解决方案，用于禁用select中的选项：

我尝试修改此选项以禁用整个选择，但没有成功（文本字段的id为testinput）：

$（“#测试输入”）.change（函数（）{
$（“专业”）.attr（“残疾”、“残疾”）；
}
);

---

这是一个简化版本（实际函数应该检查testinput中字符串的长度，并根据该长度决定是否禁用或启用select），但是如果有人可以帮助我实现这一点，那么修改它就很容易了。

试试这个，而不是jQuery

document.getElementById('testinput').disabled = true;

---

试试这个，而不是jQuery

document.getElementById('testinput').disabled = true;

试一试

试一试

---

对我来说，如果在DOM准备就绪后声明事件处理程序，它就可以工作：

<script type="text/javascript">

$(document).ready(function() {
$("#testinput").change(function(){
    $("#specialty").attr("disabled","disabled");
}
);
});

</script>

$（文档）.ready（函数（）{
$（“#测试输入”）.change（函数（）{
$（“专业”）.attr（“残疾”、“残疾”）；
}
);
});

---

但是，这样，只有在输入框失去焦点后，选择框才会禁用。您可能希望改用一个按键事件。

对于我来说，如果在DOM准备就绪后声明事件处理程序，则它会起作用：

<script type="text/javascript">

$(document).ready(function() {
$("#testinput").change(function(){
    $("#specialty").attr("disabled","disabled");
}
);
});

</script>

$（文档）.ready（函数（）{
$（“#测试输入”）.change（函数（）{
$（“专业”）.attr（“残疾”、“残疾”）；
}
);
});

---

但是，这样，只有在输入框失去焦点后，选择框才会禁用。您可能希望改用一个按键事件。

您的代码应按编写的方式工作（请参阅示例）。但是要记住一件事——文本输入的onchange事件只有在焦点离开文本框时才会被触发。换句话说，下拉列表只有在它们继续移动后才会被禁用

---

如果您想在他们开始键入时立即禁用它，您需要使用另一个事件，例如onfocus或onkeydown。

您的代码应该按编写的方式工作（参见示例）。但是要记住一件事——文本输入的onchange事件只有在焦点离开文本框时才会被触发。换句话说，下拉列表只有在它们继续移动后才会被禁用

---

如果您想在他们开始键入时立即禁用它，您需要使用另一个事件，例如onfocus或onkeydown。

如果使用jQuery版本>=1.6，请使用prop（）方法“disabled”

不确定你想要什么样的测试，但这里是基本的

$("#testinput").change(function(){                              
    var value=this.value;
    var test= value=='' || value.length===x;
    $("#specialty").prop("disabled",test);//  will enable/disable based on test

})

---

如果使用jQuery版本>=1.6，请将prop（）方法用于“disabled”

不确定你想要什么样的测试，但这里是基本的

$("#testinput").change(function(){                              
    var value=this.value;
    var test= value=='' || value.length===x;
    $("#specialty").prop("disabled",test);//  will enable/disable based on test

})

---

对于最新的jquery版本，需要使用prop（）而不是attr（）

您还可以使用focusin（）和focusout（）函数来实现此目的

//输入文本时禁用下拉列表
$（'#testinput'）.focusin（函数（）{
$（“#专业”）.attr（'disabled'，true）；
});
//仅当未输入任何内容时启用下拉列表
$（'#testinput'）.focusout（函数（）{
if（$（'#testinput'）.val（）.length==0）{
$（“#专业”）.attr（'disabled'，false）；
}  
});

输入：
--挑选--
对于最新的jquery版本，需要使用prop（）而不是attr（）

您还可以使用focusin（）和focusout（）函数来实现此目的


//输入文本时禁用下拉列表
$（'#testinput'）.focusin（函数（）{
$（“#专业”）.attr（'disabled'，true）；
});
//仅当未输入任何内容时启用下拉列表
$（'#testinput'）.focusout（函数（）{
if（$（'#testinput'）.val（）.length==0）{
$（“#专业”）.attr（'disabled'，false）；
}  
});

输入：
--挑选--
好了，现在有些事情让人很困惑。我从页面中删除了所有Javascript/JQuery，包括事件调用，现在选择框一直处于禁用状态@罗伯特：你确定你已经从HTML中删除了
disabled=“disabled”
？这在HTML中从来没有，我只是再次检查，它不在那里。这真令人困惑。页面上完全没有Javascript被调用，但是select被禁用。如果页面上根本没有Javascript，并且select框没有使用HTML属性被禁用，我想不出有什么方法可以禁用它。请验证这不是缓存问题（强制刷新浏览器中的页面）。如果这还不能解决问题，请上传一个测试用例。实际上，我必须使用JQuery来启用它-仍然不能完全理解这一点，但我已经让它工作了。谢谢大家。好了，现在有些事情真的让人困惑。我从页面中删除了所有Javascript/JQuery，包括事件调用，现在选择框一直处于禁用状态@罗伯特：你确定你已经从HTML中删除了
disabled=“disabled”
？这在HTML中从来没有，我只是再次检查，它不在那里。这真令人困惑。页面上完全没有Javascript被调用，但是select被禁用。如果页面上根本没有Javascript，并且select框没有使用HTML属性被禁用，我想不出有什么方法可以禁用它。请验证这不是缓存问题（强制刷新浏览器中的页面）。如果这还不能解决问题，请上传一个测试用例。实际上，我必须使用JQuery来启用它-仍然不能完全理解这一点，但我已经让它工作了。谢谢大家。