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

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
});