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

Here is the JSFiddle demo

添加了遗失的ID（仅添加了name属性，并在仍尝试使用时忘记了ID）
将代码中的“提交”更改为“提交”
删除JQuery $语法
验证keypress而不是提交点击（由于您无法点击该按钮，因此没有任何意义）
Else代码以重新禁用该按钮

Answer 2

onclick事件提交按钮在这里没有意义。您必须收听change的{{1}}和file input事件的keyup事件并相应地应用条件。您尚未指定text input属性（id）

另请注意，如果按钮为videoTitle

，则不会调用click处理程序

试试这个：

disabled

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

Answer 3

你能尝试让你的submit功能做点什么吗？

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

Answer 4

您应该对文本和视频文件元素使用change事件。因此，无论何时修改某些内容，都会触发更改事件并在其中检查您的条件。根据它启用“提交”按钮。

请参阅以下代码以供参考！

    <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>

只需将此脚本替换为此脚本即可。尝试..

希望这对你有用..

禁用并启用html按钮

5 个答案: