首页  >  文章  >  web前端  >  如何在 jQuery 中动态启用/禁用提交按钮?

如何在 jQuery 中动态启用/禁用提交按钮?

Barbara Streisand
Barbara Streisand原创
2024-11-10 17:42:03191浏览

How to Dynamically Enable/Disable a Submit Button in jQuery?

使用 jQuery 禁用和启用提交按钮

使用表单时,通常需要禁用提交按钮,直到满足某些条件。在这种情况下,您希望在文本字段为空时禁用提交按钮,并在文本字段包含值时启用它。

提供的代码无法正常运行,因为更改事件不是每次都会触发按下一个键的时间。相反,建议在这种情况下使用 keyup 事件。

这是一个优化的解决方案:

$(document).ready(function() {
    $(':input[type="submit"]').prop('disabled', true);
    $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
            $(':input[type="submit"]').prop('disabled', false);
        } else {
            $(':input[type="submit"]').prop('disabled', true);
        }
    });
});

此解决方案利用 keyup 事件,该事件会捕获发生的击键。当文本字段为空(即值为空字符串)时,提交按钮保持禁用状态。但是,一旦输入字符,提交按钮就会启用。如果该字段再次变空,提交按钮将重新禁用。

以上是如何在 jQuery 中动态启用/禁用提交按钮?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn