Question

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

我知道我可以用这个：

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

永久禁用选择，但有没有办法在文本字段的值更改时动态分配该属性？我知道没有css属性可以像文本输入和textareas一样。

我找到的东西是用于禁用select中的选项的JQuery解决方案：

Disable select options based on value *through the HTML only!*

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

<script type="text/javascript">

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

</script>

这是一个简化版本（真正的函数应检查testinput中字符串的长度，并决定是否禁用或启用基于此的选择），但如果有人可以帮助我实现这一点，那么修改它很容易

Answer 1

对于最新的jquery版本，需要使用prop()而不是attr()。

="$ctrl.myData"></hero-detail>

您也可以为此使用 focusin() 和 focusout() 函数。

$('#specialty').prop('disabled', true);

//disable dropdown when entering text 
$('#testinput').focusin(function(){
    $('#specialty').attr('disabled',true);
});

//enable dropdown only if nothing entered
$('#testinput').focusout(function(){
  if($('#testinput').val().length == 0){
    $('#specialty').attr('disabled',false);
  }  
});

Answer 2

试试这个而不是jQuery

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

Answer 3

尝试

 $("#specialty").attr("disabled", true);

Answer 4

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

<script type="text/javascript">

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

</script>

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

Answer 5

您的代码应该按照书面形式工作（例如，请参阅http://jsfiddle.net/3QXnq/）。但有一点要记住 - 只有当焦点离开文本框时，才会触发文本输入的onchange事件。换句话说，下拉列表在继续之前不会被禁用。

如果您想在开始输入时立即禁用它，您将需要使用其他事件，例如onfocus或onkeydown。

Answer 6

如果使用jQuery版本＆gt; = 1.6，对'禁用'使用prop（）方法

http://api.jquery.com/prop/

不完全确定你想要什么测试，但这是基础知识

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

})

根据文本字段值动态禁用选择菜单

6 个答案: