Question

如果用户未提供任何文字，我正在尝试停用提交按钮。

乍一看，它看起来一切正常，但如果用户键入一些文本，然后将其删除，则提交按钮将变为启用状态。

这是我的代码：

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

Answer 1

您只能在document.ready上停用，只有DOM准备就绪时才会发生这种情况，但当文本框变空时，您也需要{key}事件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（）方法为属性返回undefined 尚未设定。检索和更改DOM属性，例如选中，选中或禁用表单元素的状态，使用 .prop()方法，jQuery docs

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

Answer 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之后if($(this).val.length !=0){的括号{{1}}

Answer 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>

Answer 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' ... >

Answer 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

如果输入字段为空，请禁用提交按钮

5 个答案: