首页 > web前端 > js教程 > 如何使用基于文本字段值的 jQuery 禁用和启用提交按钮?

如何使用基于文本字段值的 jQuery 禁用和启用提交按钮?

Barbara Streisand
发布: 2024-11-06 21:57:02
原创
421 人浏览过

How to Disable and Enable Submit Buttons with jQuery Based on Text Field Value?

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

为了根据文本字段的值控制提交按钮的启用/禁用状态,以下 jQuery代码可以实现:

$(document).ready(function() {<pre class="brush:php;toolbar:false"> $(':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);
    }
 });
登录后复制

});

此代码完成以下任务:

  • 最初禁用提交按钮。
  • 监听文本字段中的按键事件。
  • 当在文本字段,检查其值是否不为空。
  • 如果文本字段不为空,则启用提交按钮。
  • 如果文本字段为空,则禁用提交按钮。

因此,提交按钮将保持禁用状态,直到文本字段包含值。输入值后,提交按钮将启用,允许提交表单。如果文本字段中的值随后被删除,提交按钮将再次被禁用,从而阻止表单提交。

以上是如何使用基于文本字段值的 jQuery 禁用和启用提交按钮?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板