在执行操作之前禁用锚链接答案

【问题标题】：Disable anchor link until action is performed在执行操作之前禁用锚链接
【发布时间】：2015-12-21 05:04:06
【问题描述】：

我有一个<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>

这只是屏幕两侧的“箭头”。我的页面布局是“all in one”，这意味着新页面不会重新加载，“Home”-“About”-“etc”页面都在同一个 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 一无所知，但在用户选择他/她的文件之前，我设法禁用了提交按钮。我想在这种情况下与箭头没有太大区别，但正如我所说的那样，我很讨厌 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>

【问题讨论】：

如果您提供实时代码 sn-p 或 jsFiddle 来说明您遇到的问题，将会很有帮助。
刚刚添加了我用来禁用按钮的代码，只是想知道禁用箭头是否会有所不同
严格意义上的Anchors不能被禁用；但是，您可以应用 return false 和一些样式来这样做。

标签： javascript jquery html css

【解决方案1】：

这个方案不能真正判断文件是否真的上传到服务器，但可以判断是否有尝试。

我们需要提前隐藏按钮

<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

【讨论】：

问题：如果我单击表单上的提交按钮，但没有上传任何文件，则会出现箭头。我认为检查用户是否上传文件是必要的
很简单，只是在$('a.hidden').removeClass('hidden');上面加了if($('#some_file_input').val())

【解决方案2】：

这是一个简单的示例。您应该缩小特定锚标签的选择器范围，否则它将适用于所有锚，但您可以有一个想法。

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

【讨论】：

我在箭头 (id="left") 中添加了一个 id，并尝试了您建议的代码：<script> $('#left').on('click', function(e){ if ($('#some_file_input').get(0).files.length === 0) { event.preventDefault(); } }); <script> 也许我执行错了
在您的示例中，您有function(e)，然后是event.preventDefault()。确保你使用e，然后使用e.preventDefault()，否则使用function(event)，然后使用event.preventDefault()
无论哪种方式，我认为隐藏 <a> 标记为@cylua2 建议是更好的方法。