如果输入框为空，则禁用提交按钮。

Question

如果输入框为空，则禁用提交按钮。

27

我试图在用户没有提供任何文本的情况下禁用提交按钮。

乍一看，似乎一切正常，但如果用户输入一些文本，然后删除它，提交按钮会变为可用状态。

这是我的代码：

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

- Saulius s

1

添加一个else语句来禁用它。 - tymeJV

1

如果长度为0，您永远不会禁用它。 - tckmn

攻击呢？使用启用和禁用属性并不安全...只需在浏览器中单击F12，在HTML中找到提交按钮，然后删除禁用！即使输入为空，它也会提交表单。 - Elnaz

@Elnaz 事实上，您仍需要在后端包含适当的检查。不过，这对于UI改进很有用。另外，keyup 不是我的首选。如果用户剪切文本会怎么样呢？.on('input', ... 可能是更好的选择。 - savx2

6个回答

11

尝试一下这段代码

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

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

请查看演示Fiddle

在if语句中您缺少else部分（以便在文本框为空时再次禁用按钮），并且在if($(this).val.length !=0){中的val函数后面需要加括号()。

- Nalaka526

注意：如果你在keyup事件中使用箭头函数，它将无法正常工作。 - Mohamed Sameer

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>

- Akbar

3

一个简单的方法：

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


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

- Marcelo Machado

1

对于那些使用 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

- jkras

0

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

.btn{
    color:red;
    background-color:black;
    width:100px;
    padding:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<form>
    <input type="text" name="email" id="message1">
    <input type="text" name="name" id="message">
    <button class="btn sendValueButton" type="submit">send</button>
</form>

- Haneen Khairi

请不要只给出代码答案。请描述您解决的问题。 - Lee Taylor

代码是解决错误的方法！此代码将在字段仍为空时禁用按钮，因此您可以使用它来禁用按钮，并在所有字段填充时启用它。 - Haneen Khairi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adil · Accepted Answer

你只在文档准备好时禁用，这仅会在DOM准备就绪时发生一次，但当文本框为空时，你需要在keyup事件中禁用。同时将$(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语句。对于禁用、选中等属性，jQuery 1.6及以上版本不建议使用attr作为属性，而应该使用prop。

从jQuery 1.6开始，如果属性未设置，.attr()方法会返回undefined。若要检索和更改表单元素的选中、禁用状态等DOM属性，请使用.prop()方法，jQuery文档。

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