Question

我有<i>标记：

<a class="welcome-page-left hidden-xs" href="#page-slider" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="welcome-page-right hidden-xs" href="#page-slider" data-slide="next"><i class="fa fa-chevron-right"></i></a>

这只是＆＃34;箭头＆＃34;在屏幕的每一侧。我的页面布局是＆＃34;所有在一个＆＃34;意味着新页面没有重新加载，＆＃34; Home＆＃34; - ＆＃34;关于＆＃34; - ＆＃34;等等＆＃34;页面都在同一个MAIN页面中，您只需使用屏幕右侧和左侧的箭头移动它们。

我在主页上有一个文件输入标记，我想禁用此箭头直到用户提交文件。这是我的输入标签：

<form  action="{% url "do_some_work" %}" method="POST"  enctype="multipart/form-data" class="custom-form-thing">
 {% csrf_token %}
     <div class="inputWrapper">
             <input id="some_file_input" type="file"  name="some_file" class="custom-input-thing" data-buttonName="btn-primary" data-icon="true">
     </div>
     <button type="submit" class="btn btn-default">Submit</button>
 </form>

我对javascript一无所知但有了hel我设法禁用了提交按钮，直到用户选择他/她的文件。我猜这种情况与箭头没什么区别，但是我说javascript就像我说的那样。

提前感谢您的帮助。

问题：在用户提交文件之前，如何禁用此箭头？

修改

这是我如何禁用表单中的提交按钮，是不同的禁用标签？：

<script>

$('form').submit(function(event){
    validated = true;

    if ($('#some_file_input').get(0).files.length === 0) {
        validated = false;
        console.log("No files selected.");
        // Or some div with image showing
        var div = document.createElement('div');
        div.innerHTML = "<img src='{% static "wappApp/images/Icono_de_Alto.png"%}' classs= 'imgclass'>";

        // better to use CSS though - just set class
        div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
        document.body.appendChild(div);
        $('.myclass').finish().fadeIn("fast").delay(2000).fadeOut("slow");

    }

    if (validated != true) {
        event.preventDefault();
    }
});
</script>

Answer 1

这是一个简单的样本。您应该缩小特定锚标记的选择器，否则它将应用于所有锚点，但您可以有一个想法。

$('a').on('click', function(e){ 
    if (conditionNotMet) {
        e.preventDefault();
    }
});

Answer 2

此解决方案无法确定文件是否已真正上传到服务器，但可以确定是否已尝试。

我们需要提前隐藏按钮

<a class="welcome-page-left hidden-xs hidden " href="#page-slider" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="welcome-page-right hidden-xs hidden " href="#page-slider" data-slide="next"><i class="fa fa-chevron-right"></i></a>

用户提交文件后，会出现箭头

$(document).ready(function(){
    $(".custom-form-thing").submit(function() {
        $('a.hidden').removeClass('hidden');
    });
});

但完整的解决方案可能不仅仅是jQuery + CSS + HTML

禁用锚点链接，直到执行操作

2 个答案: