禁用和启用html按钮

Question

如果用户选择视频文件且文本框不为空，则用户只能单击“提交”按钮。 我可以禁用“提交”按钮，但不能重新启用它

<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file"><span></span></label>
<input type="file" name="videofile" id="videofile" />
<br/>
Please enter video title:
<br/>
<input type"text" name="videoTitle" />
<br />
<input type="button" disabled id="Submit" value="Submit" onclick="submit()"/>
</form>

                <script>

                document.getElementById('submit').disabled = true;
                var n=document.getElementById('videoTitle').value;

                function submit();

                if($('#videofile')[0].files.length != 0) && (n.length > 1)
                {
                document.getElementById('submit').disabled = false;
                }
                </script>

Answer 1

您的代码有很多错误。 这是您更正的代码：

function check() {
  if (document.querySelector('#videofile').files.length != 0 && (document.getElementById("videoTitle").value.length > 1)) {
    document.getElementById('Submit').disabled = false;
  } else {
    document.getElementById('Submit').disabled = true;
  }
}

这是JSFiddle演示

• 添加了缺少的ID（u仅添加了name属性，并且在尝试使用它们时忘记了ID ）
• 将代码中的“提交”更改为“提交”
• 删除JQuery $语法
• 在keypress上进行验证，而不是在提交单击上进行验证（这没有意义，因为在禁用按钮后您无法单击按钮）
• 如果条件无效，则添加Else代码以重新禁用按钮

Answer 2

在提交按钮上的onclick事件在这里没有意义。 您必须侦听file input change事件和text input keyup事件，并相应地应用条件。 您还没有分配id属性（ videoTitle ）

另请注意，如果disabled了按钮，则不会调用click handler。

尝试这个：

  var submitBtn = document.getElementById('Submit'); function enableDisable() { var elem = document.getElementById('videofile'); var n = document.getElementById('videoTitle').value; if (elem.files.length && n) { submitBtn.disabled = false; } else { submitBtn.disabled = true; } } 

 <form action="upload.php" method="post" enctype="multipart/form-data"> <label for="file"><span></span></label> <input type="file" name="videofile" id="videofile" onchange='enableDisable()' /> <br/> Please enter video title: <br/> <input type="text" name="videoTitle" id='videoTitle' onkeyup='enableDisable()' /> <br /> <input type="button" disabled id="Submit" value="Submit" /> </form> 

Answer 3

您可以尝试使您的submit函数执行某些操作吗？

function submit() {
    if($('#videofile')[0].files.length != 0) && (n.length > 1) {
        document.getElementById('submit').disabled = false;
    }
};

Answer 4

您应该对文本和视频文件元素使用change事件。 这样，每当您修改某些内容时，都会触发change事件并在其中检查ur条件。 提交按钮已相应启用。

Se下面的代码供参考！

    <form action="upload.php" method="post" enctype="multipart/form-data">
    <label for="file"><span></span></label>
    <input type="file" name="videofile" id="videofile" />
    <br/>
    Please enter video title:
    <br/>
    <input type"text" name="videoTitle" id="videoText"/>
    <br />
    <input type="button" disabled id="Submit" value="Submit" onclick="submit()"/>
    </form>

                    <script>

                    document.getElementById('submit').disabled = true;
                    var n=document.getElementById('videoTitle').value;

                    function submit();

    $('#videofile').change(function() {
          if($('#videofile')[0].files.length != 0) && (n.length > 1) {
              document.getElementById('submit').disabled = false;
          } else {
              document.getElementById('submit').disabled = true;
          }
    });

    $('#videoText').change(function() {
          if($('#videofile')[0].files.length != 0) && (n.length > 1) {
              document.getElementById('submit').disabled = false;
          } else {
              document.getElementById('submit').disabled = true;
          }
    });

                    </script>

Answer 5

我觉得这是实现这一目标的简单方法

<script>
    document.getElementById("submit").style.pointerEvents = "none"; //Disable
    var n=document.getElementById('videoTitle').value;

    function submit();

        if($('#videofile')[0].files.length != 0) && (n.length > 1)
        {
            document.getElementById("submit").style.pointerEvents = "all"; //Enable
        }
</script>

只需用此脚本替换您的脚本并尝试..

希望这对您有用。