jQuery 如果输入字段为空，则禁用提交按钮

在本文中，我们将介绍如何使用jQuery在输入字段为空时禁用提交按钮的方法。

1. 使用jQuery选择器获取输入字段的值

要判断输入字段是否为空，首先需要获取输入字段的值。使用jQuery选择器可以轻松地获取输入字段的值。以下是一些常用的jQuery选择器示例：

使用id选择器获取输入字段的值：

var value = $("#inputFieldId").val();

使用类选择器获取输入字段的值：

var value = $(".inputFieldClass").val();

使用属性选择器获取输入字段的值：

var value = $("input[name='inputFieldName']").val();

2. 判断输入字段值是否为空

获取到输入字段的值后，可以使用if语句判断其是否为空。如果值为空，则禁用提交按钮。示例如下：

var value =  $("#inputFieldId").val(); if (value === "") {$ ("#submitButtonId").prop("disabled", true);
}

3. 监听输入字段的变化

以上示例代码只在页面加载时判断输入字段的值是否为空。如果希望实时监听输入字段的变化并动态禁用或启用提交按钮，可以使用jQuery的事件监听函数。以下是一个示例：

$("#inputFieldId").on("input", function() {
    var value = $(this).val();
    if (value === "") {
        $("#submitButtonId").prop("disabled", true);
    } else {
        $("#submitButtonId").prop("disabled", false);
    }
});

上述代码中，使用on("input", function() {})监听输入字段的输入事件，并在每次输入事件触发时判断输入字段的值是否为空。

4. 完整示例

下面是一个完整的示例，演示了如何根据输入字段的值来禁用或启用提交按钮：

<!DOCTYPE html>
<html>
<head>
    <title>Disable Submit Button with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
         $(document).ready(function() {$ ("#inputFieldId").on("input", function() {
                var value =  $(this).val(); if (value === "") {$ ("#submitButtonId").prop("disabled", true);
                } else {
                    $("#submitButtonId").prop("disabled", false);
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" id="inputFieldId">
    <button type="submit" id="submitButtonId" disabled>Submit</button>
</body>
</html>

在上述示例中，当输入字段的值为空时，提交按钮被禁用，否则按钮可用。