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

【问题标题】：If input field is empty, disable submit button如果输入字段为空，则禁用提交按钮
【发布时间】：2013-07-17 11:52:58
【问题描述】：

如果用户没有提供任何文本，我会尝试禁用提交按钮。

乍一看，一切正常，但如果用户键入一些文本，然后删除它，提交按钮就会启用。

这是我的代码：

$(document).ready(function(){
    $('.sendButton').attr('disabled',true);
    $('#message').keyup(function(){
        if($(this).val.length !=0){
            $('.sendButton').attr('disabled', false);
        }
    })
});

【问题讨论】：

添加一个禁用它的 else 语句
如果长度为 0，你永远不会禁用它。
攻击呢？使用 enable 和 disable 属性是不安全的......只需在浏览器中单击 f12，在 html 中找到提交按钮，然后将禁用的删除！即使输入为空，它也会提交表单。
@Elnaz 确实如此，因此您仍然需要在后端包含适当的检查。尽管如此，这对于 UI 改进还是很有用的。另一方面，keyup 不是我的首选。如果用户剪切文本怎么办？ .on('input', ... 可能是更好的选择。

标签： jquery forms

【解决方案1】：

您仅在 document.ready 上禁用，并且仅在 DOM 准备好时发生一次，但当文本框为空时，您也需要在 keyup 事件中 disable。还将$(this).val.length 更改为$(this).val().length

$(document).ready(function(){
    $('.sendButton').attr('disabled',true);
    $('#message').keyup(function(){
        if($(this).val().length !=0)
            $('.sendButton').attr('disabled', false);            
        else
            $('.sendButton').attr('disabled',true);
    })
});

或者您可以使用条件运算符代替 if 语句。也使用 prop 而不是 attr 因为属性不是 recommended by jQuery 1.6 及以上用于禁用、检查等。

从 jQuery 1.6 开始，.attr() 方法返回未定义的属性尚未设置。检索和更改 DOM 属性，例如表单元素的选中、选择或禁用状态，使用 .prop()方法，jQuery docs

$(document).ready(function(){
    $('.sendButton').prop('disabled',true);
    $('#message').keyup(function(){
        $('.sendButton').prop('disabled', this.value == "" ? true : false);     
    })
});

【讨论】：

如何处理多个 id 元素？例如#name、#email、#message
如果您使用输入值，最后一个将不起作用。
你怎么确定这适用于正确的按钮？还有，“.”是什么意思？和“#”是什么意思？

【解决方案2】：

试试这个代码

$(document).ready(function(){
    $('.sendButton').attr('disabled',true);

    $('#message').keyup(function(){
        if($(this).val().length !=0){
            $('.sendButton').attr('disabled', false);
        }
        else
        {
            $('.sendButton').attr('disabled', true);        
        }
    })
});

查看demo Fiddle

您缺少 if 语句的 else 部分（如果文本框为空，则再次禁用按钮）和 val 中 val 函数后的括号 ()if($(this).val.length !=0){

【讨论】：

注意：如果您使用箭头功能进行按键，它将不起作用。

【解决方案3】：

请试试这个

<!DOCTYPE html>
<html>
  <head>
    <title>Jquery</title>
    <meta charset="utf-8">       
    <script src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
  </head>

  <body>

    <input type="text" id="message" value="" />
    <input type="button" id="sendButton" value="Send">

    <script>
    $(document).ready(function(){  

      var checkField;

      //checking the length of the value of message and assigning to a variable(checkField) on load
      checkField = $("input#message").val().length;  

      var enableDisableButton = function(){         
        if(checkField > 0){
          $('#sendButton').removeAttr("disabled");
        } 
        else {
          $('#sendButton').attr("disabled","disabled");
        }
      }        

      //calling enableDisableButton() function on load
      enableDisableButton();            

      $('input#message').keyup(function(){ 
        //checking the length of the value of message and assigning to the variable(checkField) on keyup
        checkField = $("input#message").val().length;
        //calling enableDisableButton() function on keyup
        enableDisableButton();
      });
    });
    </script>
  </body>
</html>

【讨论】：

【解决方案4】：

一个简单的方法：

function toggleButton(ref,bttnID){
    document.getElementById(bttnID).disabled= ((ref.value !== ref.defaultValue) ? false : true);
}


<input ... onkeyup="toggleButton(this,'bttnsubmit');">
<input ... disabled='disabled' id='bttnsubmit' ... >

【讨论】：

【解决方案5】：

对于那些使用 coffeescript 的人，我已将我们使用的代码放在全局范围内，以禁用我们最广泛使用的表单上的提交按钮。改编自上述 Adil 的回答。

$('#new_post button').prop 'disabled', true
$('#new_post #post_message').keyup ->
    $('#new_post button').prop 'disabled', if @value == '' then true else false
    return

【讨论】：