Question

我有一个在文本框中输入的表单。首先我显示1个文本框，然后单击按钮（添加），显示另一个文本框。如果任何文本框为空，我希望禁用添加按钮。我的代码如下：

<script>
        function doCheck(){
            var allFilled = true;
            var inputs = document.getElementsByName("a[]");
            for(var i=0; i<inputs.length; i++){
                if(inputs[i].type == "text" && inputs[i].value == ''){
                    allFilled = false;
                    break;
                }
            }
            document.getElementById("add_a").disabled = !allFilled;
        }

        window.onload = function(){
            var inputs = document.getElementsByName("a[]");
            for(var i=0; i<inputs.length; i++){
                if(inputs[i].type == "text"){
                    inputs[i].onkeyup = doCheck;
                    inputs[i].onblur = doCheck;
                }
            }
        };
        $(document).ready(function(){
            $("#add_a").click(function(){
                $("#a").append("<li><input class='textbox' name='a[]' type='text' size='120'></li>");
            });
       });
    </script>

html部分：

 <ol id="a">
        <li><input class="textbox" type="text" name="a[]" size="120" /></li>
</ol>
<input class="btn" type="button" id="add_a" value="ADD" disabled="true">

这适用于第一个文本框，但不适用于单击“添加”按钮后动态显示的文本框。请告诉我如何将其应用于所有人

Answer 1

注意：不要在代码中混用jQuery和javascript。

要完成这项工作，您需要做两件事。

首先，

$("#add_a").click(function () {
    $("#a").append("<li><input class='textbox' name='a[]' type='text' size='120'></li>");
    $("#add_a").prop('disabled', true); //disable immediately after adding
});

其次，

由于您要动态添加文本框，因此您需要使用event delegation.

$(document).on('keyup', '.textbox', function(){
     // Check all textboxes' text length and disable btn functionality here
});

Answer 2

使用Event Delegation将您的函数绑定到页面加载时存在的元素（如document或更好的是包含更接近元素的div）：

$(document).on('keyup', '.textbox', function(){
     // do stuff
});

Answer 3

这是一个脏版本供您试用。如果那对你有用，我会回来轻推它。正如其他人所说，无论如何都要充分利用jQuery。

$("#add_a").click(function(){
    $("#a").append("<li><input class='textbox' name='a[]' type='text' size='40'></li>");
    $(this).prop("disabled", true);
});

$(document).on("keyup", "#a input", function() {
    var emptyInputs = $("#a").find("input").filter(function() {
        return $.trim( $(this).val() ) == ""
    }).length;
    $("#add_a").prop("disabled", emptyInputs);
});

演示@ fiddle

在动态添加的文本框中输入文本时启用按钮

3 个答案: