使用Javascript限制窗体中的子级数

我试图将用户可以动态添加到文件上载表单中的其他表单输入字段的数量限制为3个。表单加载一个静态输入字段，通过javascript可以使用add按钮添加其他字段，或者使用remove按钮删除其他表单输入字段。下面是静态形式的html

<fieldset>
        <legend>Upload your images</legend>
          <ol id="add_images">
            <li>
              <input type="file" class="input" name="files[]" />
            </li>
          </ol>
         <input type="button" name="addFile"  id="addFile" value="Add Another Image" onclick="window.addFile(this);"/>
</fieldset>

上传你的图片

使用javascript，我想创建一个函数，其中子

元素的数量被计数，如果该数量等于三，那么“添加另一个图像”按钮将被禁用。此外，如果表单中有三个

元素，用户使用移除按钮移除子

，则“添加另一个图像”按钮将再次启用

我想我可能遗漏了一些关键的代码行。下面的javascript代码只允许我在“添加另一个图像”按钮禁用之前添加一个额外的输入字段。使用“删除文件”按钮删除此字段将删除该字段，但“添加另一个图像”按钮仍处于禁用状态。下面是我目前使用javascript的地方

function addFile(addFileButton) {
    var form = document.getElementById('add_images');
    var li = form.appendChild(document.createElement("li"));

    //add additional input fields should the user want to upload additional images.    
    var f = li.appendChild(document.createElement("input"));
    f.className="input";
    f.type="file";
    f.name="files[]";

    //add a remove field button should the user want to remove a file
    var rb = li.appendChild(document.createElement("input"));
    rb.type="button";
    rb.value="Remove File";
    rb.onclick = function () {
        form.removeChild(this.parentNode);
    }
    //create the option to dispable the addFileButton if the child nodes total "3"
    var nodelist;
    var count;
    nodelist = form.childNodes;
    count = nodelist.length;

    for(i = 0; i < count; i++) {

    if (nodelist[i] ==3) {
        document.getElementById("addFile").disabled = 'true';
    }    
    else { //if there are less than three keep the button enabled
        document.getElementById("addFile").disabled = 'false';  
    }
}

函数addFile（addFileButton）{
var form=document.getElementById（'add_images'）；
var li=form.appendChild（document.createElement（“li”）；
//如果用户希望上载其他图像，请添加其他输入字段。
var f=li.appendChild（document.createElement（“输入”）；
f、 className=“输入”；
f、 type=“文件”；
f、 name=“files[]”；
//如果用户要删除文件，请添加“删除字段”按钮
var rb=li.appendChild（document.createElement（“输入”）；
rb.type=“按钮”；
rb.value=“删除文件”；
rb.onclick=函数（）{
form.removeChild（this.parentNode）；
}
//如果子节点总数为“3”，则创建可显示addFileButton的选项
变量节点列表；
var计数；
nodelist=form.childNodes；
计数=节点列表长度；
对于（i=0；i

---

}

我建议采用稍微不同的方法。静态创建所有三个文件输入字段，并提供一个清除按钮。如果用户选择将其留空，则可以。如果这不美观，请使用“删除”简单地隐藏字段（CSS样式显示：none；）。

我建议使用稍微不同的方法。静态创建所有三个文件输入字段，并提供一个清除按钮。如果用户选择将其留空，则可以。如果这不美观，请使用“删除”简单地隐藏字段（CSS样式显示：none；）。

该函数的最后一部分有点奇怪。从技术上讲，在添加字段时，您应该只禁用按钮（即，您不能通过添加字段来启用按钮）。我建议删除for循环并使用：

var count = form.getElementsByTagName("li").length;
if(count == 3)
    document.getElementById("addFile").disabled = true;

删除项目时“添加字段”按钮仍处于禁用状态的原因是，单击“删除”时未重新启用“添加字段”按钮。请为“删除按钮”单击处理程序尝试以下操作：

rb.onclick = function () {
    form.removeChild(this.parentNode);
    document.getElementById("addFile").disabled = false;
}

---

该函数的最后一部分有点奇怪。从技术上讲，在添加字段时，您应该只禁用按钮（即，您不能通过添加字段来启用按钮）。我建议删除for循环并使用：

var count = form.getElementsByTagName("li").length;
if(count == 3)
    document.getElementById("addFile").disabled = true;

删除项目时“添加字段”按钮仍处于禁用状态的原因是，单击“删除”时未重新启用“添加字段”按钮。请为“删除按钮”单击处理程序尝试以下操作：

rb.onclick = function () {
    form.removeChild(this.parentNode);
    document.getElementById("addFile").disabled = false;
}

---

我不知道你为什么用for循环？不应该是这样吗:

var nodelist = form.childNodes;

if (nodelist.length >= 3) {
    document.getElementById("addFile").disabled = 'true';
}    
else { //if there are less than three keep the button enabled
    document.getElementById("addFile").disabled = 'false';  
}

---

我不知道你为什么用for循环？不应该是这样吗:

var nodelist = form.childNodes;

if (nodelist.length >= 3) {
    document.getElementById("addFile").disabled = 'true';
}    
else { //if there are less than three keep the button enabled
    document.getElementById("addFile").disabled = 'false';  
}

---

哦，好的，我现在已经测试了代码，发现了几个问题：

您正在计算子元素的数量，但这包括文本元素，因此实际上有一个用于

，一个用于其中的文本

您已将禁用属性的true/false设置括在引号中，但它不起作用，并且始终将其设置为false

“删除”按钮不会重新启用“添加”按钮

我发现这是可行的：

    function addFile(addFileButton) {
        var form = document.getElementById('add_images');
        var li = form.appendChild(document.createElement("li"));

        //add additional input fields should the user want to upload additional images.
        var f = li.appendChild(document.createElement("input"));
        f.className="input";
        f.type="file";
        f.name="files[]";

        //add a remove field button should the user want to remove a file
        var rb = li.appendChild(document.createElement("input"));
        rb.type="button";
        rb.value="Remove File";
        rb.onclick = function () {
            form.removeChild(this.parentNode);
            toggleButton();
        }
        toggleButton();
    }

    function toggleButton() {
        var form = document.getElementById('add_images');
        //create the option to dispable the addFileButton if the child nodes total "3"
        var nodelist;
        var count;
        nodelist = form.childNodes;
        count = 0;


        for(i = 0; i < nodelist.length; i++) {
            if(nodelist[i].nodeType == 1) {
                count++;
            }
        }

        if (count >= 3) {
            document.getElementById("addFile").disabled = true;
        }
        else { //if there are less than three keep the button enabled
            document.getElementById("addFile").disabled = false;
        }
    }

函数addFile（addFileButton）{
var form=document.getElementById（'add_images'）；
var li=form.appendChild（document.createElement（“li”）；
//如果用户希望上载其他图像，请添加其他输入字段。
var f=li.appendChild（document.createElement（“输入”）；
f、 className=“输入”；
f、 type=“文件”；
f、 name=“files[]”；
//如果用户要删除文件，请添加“删除字段”按钮
var rb=li.appendChild（document.createElement（“输入”）；
rb.type=“按钮”；
rb.value=“删除文件”；
rb.onclick=函数（）{
form.removeChild（this.parentNode）；
切换按钮（）；
}
切换按钮（）；
}
函数toggleButton（）{
var form=document.getElementById（'add_images'）；
//如果子节点总数为“3”，则创建可显示addFileButton的选项
变量节点列表；
var计数；
nodelist=form.childNodes；
计数=0；
对于（i=0；i=3）{
document.getElementById（“addFile”）.disabled=true；
}
否则{//如果少于三个，则保持按钮处于启用状态
document.getElementById（“addFile”）.disabled=false；
}
}

哦，好的，我现在已经测试了代码，发现了几个问题：

您正在计算子元素的数量，但这包括文本元素，因此