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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 13:10:09  来源:igfitidea点击:

Enable/Disable Input based on selection (jQuery)

javascriptjqueryhtmlcss

提问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 #provincewill 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 trueto 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 trueif the value is "other" and false otherwise.

$("#province").val()通常是从 jQuery 的下拉列表中获取所选选项的当前值的首选方法。true如果值为“other”,则“disabled”属性设置为,否则设置为false。