根据选择启用/禁用输入框 (jQuery)

Question

<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

$('#state').change(function () {
    if ($('#state Other:selected').text() == "Other"){
        $('#province').attr('disabled', false);
        alert(1);
    } else {
        alert(2);
    }
});

似乎不起作用。我一定做错了什么。

- eozzy

Answer 1

你应该使用.removeAttr('disabled')而不是.attr('disabled', false)。此外，你应该缓存你的jQuery选择器。

编辑：在事后思考了一下。如果你要禁用输入字段，可能还需要“清空”已输入的文本内容，所以我添加了.val('')；如果你还想隐藏它，可以在两种情况下添加.hide() 和 .show()。

我创建了这个嵌入式示例页面(fiddle)来展示一个可工作的版本:

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

使用.trigger('change')方法将会“触发”一次改变事件，从而使绑定的函数执行一次。这样，#province元素在代码运行时会根据所选的州禁用/启用。如果没有这个方法，除非你在HTML中的标签中添加了disabled='disabled'，否则即使州没有选择为“other”，省份也会一直可用。

- gnarf

---

谢谢！您能否再更详细地解释一下触发器？我不是很理解。 - JeroenEijkhof

@WmasterJ - 添加了一些解释。 - gnarf

如果我想为多个选择使用相同的脚本怎么办？有通用的脚本吗？谢谢。 - Interfaith

Answer 2

如果你想要禁用“其他（Other）”并启用其他所有功能，你需要将“disabled”设置为true。

$('#state').change(function () {
    $("#province").attr("disabled", $("#state").val() == "other");
});

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

- Eli Courtwright