Question

我有TextBox和一个按钮

首先按钮处于禁用位置当用户开始在文本框中键入文本时应该启用该按钮

如何使用JQuery或Java Script实现此目的

Answer 1

好像你是jQuery的新手。我会说你从jQuery Tutorials开始，然后转到jQuery Validate。如果您更喜欢书籍，可以选择jQuery in Action。

的副本

Answer 2

<input type='text' id='textbox'>
<input type="button" id="button'" value="click me"> 

$('#button').attr('disabled', 'disabled');

$('#textbox').change(function(){$('#button').removeAttr('disabled')} );

Answer 3

<input type="text" id="myText">
<input type="submit" id="myButton" disabled="disable"/>


jQuery(function(){

jQuery('#myText').bind('keypress',function(e){
    if((jQuery(e.target).val()+"").length>0)
    {
       jQuery('#myButton').removeAttr('disabled');
    }
    else
    {
       jQuery('#myButton').attr('disabled','disable');
    }
});

});

Answer 4

您也可以尝试使用

 <input type='text' id='textbox'>
    <input type="button" class="button-disabled" id="change" disabled="disabled" value="click">


    $("#textbox").keyup(checkForm).focus(checkForm);
    function checkForm()
    {
        if($("#textbox").val()=='')
           {
          $("#change").addClass("button-disabled").removeClass("button");
          $("#change").attr("disabled","disabled");
           }
           else
            {
           $("#change").removeClass("button-disabled").addClass("button");
           $("#change").removeAttr("disabled");
            }
       }

Answer 5

HTML：

<input type='text' id='textbox'>
<input type="button" id="mybutton" value="click me">

JS：

$(document).load(function() {
    $('#mybutton').attr('disabled', 'disabled');
}

$('#textbox').change(function() {
    $('#mybutton').removeAttr('disabled');
}

更新：关于使用带有ASP.NET的jQuery，请记住，一旦页面呈现，ASP.NET就会输出标准HTML，因此上述代码的工作方式类似，除非您需要弄清楚ID的ASP.net生成的文本框。有关此问题的进一步说明，请参阅此链接：
http://www.search-this.com/2009/08/06/using-jquery-with-asp-net-controls/

Answer 6

<input type='text' id='thetext' value=''>
<input type='button' disabled='disabled' id='thebutton' value='the button'>

$(document).ready(function(){
   $('#thetext').change(function(){
      $('#thebutton').removeAttr('disabled');
   });
});

阅读jQuery API：http://api.jquery.com/

使用JQuery验证文本框

6 个答案: