Question

我正在尝试禁用提交按钮，直到所有字段都有值。它适用于电子邮件和密码输入，但不适用于选择下拉列表。

我理解，由于.keyup()未应用于下拉列表，但不确定如何调整代码。我尝试使用change()事件，但完全禁用了提交按钮。

<form>   
    <input class="disableButton" id="email" type="email" />         
    <input class="disableButton" id="pass" type="password" />
    <select id="state" class="selected-state disableButton">
        <option value="">State</option>
        <option value="AL">AL</option>
        <option value="AK">AK</option>
        ...
    </select>
    <input id="emailPassSubmit" type="button" disabled="disabled" />
</form>

<script>
$(function() {
    $('.disableButton').keyup(function() {
        if ($('#email').val() == '' || $('#pass').val() == '' ||  $('#state').val() == '') {
            $('#emailPassSubmit').prop('disabled', true);
        } else {
            $('#emailPassSubmit').prop('disabled', false);
        }
    });
});
</script>

Answer 1

您需要测试keyup()和change()个事件，因为您希望在不同类型的元素上触发它。

您可以使用jQuery的on()方法将多个事件附加到元素，如下所示：

$('.disableButton').on('keyup change', function(){ ...

jsFiddle here

Answer 2

您忘了将disableButton类添加到选择下拉列表中。

这是一个工作版本：

<强> http://jsbin.com/gonut/1/

Answer 3

所选答案有效，但不优雅或可扩展。由于某些原因，每个字段都是硬编码的，即使您已经为每个必需的输入添加了一个类。

相反，只需使用类'.disableButton'循环遍历每个项目：

$('.disableButton').on('keyup change', function() {
    var empty = false;
    $('.disableButton').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('#emailPassSubmit').prop('disabled', true);
    } else {
        $('#emailPassSubmit').prop('disabled', false);
    }
});

确保每个字段（使用文本输入，下拉等）都具有“disableButton”类。此外，下拉列表必须具有默认值“”，这与您的默认值相同。

这样，将来您可以添加任意数量的字段，只要您拥有正确的类，就不必触及此代码。

禁用带有文本输入的提交按钮并选择下拉列表

3 个答案: