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

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

Barbara Streisand
Barbara Streisand原创
2024-11-06 21:57:02360浏览

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中文网其他相关文章!

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