如果所有文本字段都有值,如何在jquery中启用按钮

时间:2014-10-30 12:09:33

标签: jquery html

我试图在我拥有的所有文本字段中的值为空时禁用我的图形按钮..如果所有文本字段都有值,它将被启用。它对我来说很好,但每当我点击添加条目按钮添加一个新的Textfields Graph按钮仍然会启用,即使Textfields为空,它发生每次我填满所有的文本字段,它将启用,当我点击图形按钮它将显示另一个空文本字段,但仍然启用了图形按钮。这是我的代码

在HTML中

<body>
    <button id="myBtn" class="btn">Add Entry</button>
    <div id="myForm"></div>
    <br/>
    <button id="btnGraph" class="btn">Graph</button>
</body>

在Jquery

$(document).ready(function()
{
$("#myBtn").click(function()
{

    addCountry();

    $("input[class^='text']").keyup(function(e) 
    {
        var alltxt = $("input[class^='text']").length;
        var empty = true;
        $("input[class^='text']").each(function(i)
        {
            if($(this).val()=='')
            {
                empty=true;
                $('#btnGraph').prop('disabled', true);
                return false;
            }
            else
            {
                empty=false;
            }
        });
        if(!empty) 
            $('#btnGraph').prop('disabled', false);   
    });
});
});

2 个答案:

答案 0 :(得分:1)

试试这个:当您点击keyup时,您无需将input事件绑定到myBtn。使用.filter()迭代所有input并检查其值以设置empty标记。

$(document).ready(function()
    {
    $("#myBtn").click(function()
    {
        addCountry();

    });

    $(document).on("keyup blur", "input[class^='text']", function(){
         var empty = false;
         $("input[class^='text']").filter(function()
         {
                if($(this).val().trim()=='')
                   empty = true;      
         });


         $('#btnGraph').prop('disabled', empty);
    });

  });

<强> DEMO

答案 1 :(得分:0)

您需要检查点击和密钥中的值。尝试这样的事情。

function CheckInput() {
    var alltxt = $("input[class^='text']").length;
    var empty = true;
    $("input[class^='text']").each(function(i)
    {
        if($(this).val()=='')
        {
            empty=true;
            $('#btnGraph').prop('disabled', true);
            return false;
        }
        else
        {
            empty=false;
        }
    });
    if(!empty) 
        $('#btnGraph').prop('disabled', false); 
}

$("#myBtn").click(function()
{

    addCountry();
    // Make sure you don't bind the keyup multiple time
    $("input[class^='text']").unbind('keyup').keyup(function(e)  
    {
        CheckInput();      
    } 
    CheckInput();
});