26

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

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

这是我的代码：

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

5 回答 5

76

您仅在启用时禁用，document.ready并且仅在准备就绪时发生一次，DOM但是当文本框为空时，您也需要disable在 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 及更高版本不推荐使用prop 而不是 attr作为属性来禁用、检查等。

从 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);     
    })
});
于 2013-07-17T11:54:21.327 回答
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);        
        }
    })
});

检查演示小提琴

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

于 2013-07-17T11:59:05.967 回答
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>
于 2013-07-17T12:43:10.647 回答
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' ... >
于 2014-02-18T15:54:20.547 回答
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
于 2016-11-28T15:08:14.937 回答