Javascript 基于选择启用/禁用输入 (jQuery)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4597093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enable/Disable Input based on selection (jQuery)
提问by eozzy
<select name="state" class="select" id="state">
<option value="something">Something</option>
<option value="other">Other</option>
</select>
<input type="text" name="province" class="text" id="province" />
jQuery
jQuery
$('#state').change(function () {
if ($('#state Other:selected').text() == "Other"){
$('#province').attr('disabled', false);
alert(1);
} else {
alert(2);
}
});
Doesn't seem to work. I must be doing something wrong.
似乎不起作用。我一定做错了什么。
回答by gnarf
You should use .removeAttr('disabled')
instead of .attr('disabled', false)
. Also you should cache your jQuery selectors.
你应该使用.removeAttr('disabled')
而不是.attr('disabled', false)
. 你也应该缓存你的 jQuery 选择器。
Edit:Thought about this after the fact. You may want to "empty" the text that had been typed into the field if you are disabling it, so I added a .val('')
, if you also wanted to hide it, you could add .hide()
and .show()
to the two cases.
编辑:事后考虑这个。如果您禁用它,您可能希望“清空”已输入到该字段中的文本,因此我添加了一个.val('')
,如果您还想隐藏它,您可以将.hide()
和添加.show()
到这两种情况下。
I put together this fiddleto show you a working version:
我把这个小提琴放在一起向你展示一个工作版本:
var $state = $('#state'), $province = $('#province');
$state.change(function () {
if ($state.val() == 'other') {
$province.removeAttr('disabled');
} else {
$province.attr('disabled', 'disabled').val('');
}
}).trigger('change'); // added trigger to calculate initial state
The .trigger('change')
will "trigger" a change event, effectively running the function once while you bind it. This way, the #province
will be either disabled / enabled based on the state selected at the time the code is run. Without it, the province would have been available even if the state isn't "other" unless you also added disabled='disabled'
to the <input>
tag in your html.
在.trigger('change')
将“触发”的变化情况,有效地运行一次,而你绑定它的功能。这样,#province
将根据代码运行时选择的状态禁用/启用。没有它,即使州不是“其他”,该省也可以使用,除非您还在html 中添加disabled='disabled'
了<input>
标签。
回答by Eli Courtwright
You need to set "disabled" to true
to actually disable something. For example, if you want to disable on "Other" and enable on everything else, then I suggest saying:
您需要将“禁用”设置true
为实际禁用某些内容。例如,如果您想禁用“其他”并启用其他所有内容,那么我建议说:
$('#state').change(function () {
$("#province").attr("disabled", $("#state").val() == "other");
});
This uses $("#province").val()
which is generally the preferred way to get the current value of the selected option from a dropdown in jQuery. The "disabled" attribute is set to true
if the value is "other" and false otherwise.
这$("#province").val()
通常是从 jQuery 的下拉列表中获取所选选项的当前值的首选方法。true
如果值为“other”,则“disabled”属性设置为,否则设置为false。