即使 clickable 为 false，dropzone 中的文件上传也能正常工作

Question

我正在初始化一个 dropzone 元素，并且基于一些参数我应该切换可点击功能，以便一些用户能够上传文件而有些则不能。 我将clickable 函数的值设置为false，但该元素仍然是可点击的。 我该如何纠正这个错误？

function initializeAttachmentsDropzone(){
    Dropzone.autoDiscover = false;
    // Dropzone stuff
    myDropzone = new Dropzone("div#attachments", { url: "/app/attachments/",
                        paramName: "attachments",
                        // maxFiles: 10,
                        uploadMultiple: true,
                        addRemoveLinks: true,
                        autoProcessQueue: false,
                        parallelUploads: 10,
                        maxFilesize: 2000,
                        thumbnailHeight: 250,
                        thumbnailWidth: 250,
                        dictRemoveFileConfirmation: "Are you sure you want to delete this file?",
                        accept: function(file, done) {
                          if (file.size == 0) {
                            done("Empty files will not be uploaded.");
                          }
                          else { done(); }
                        },
                        headers: {
                            "X-CSRFToken": csrftoken
                        },
                        init: function(){
                            this.removeAllFiles();

                        }
    });
    myDropzone.on("removedfile", deleteAttachment);
}




function disableFieldsOnUpdate(){
    if ($("#page_details").val()){
        $(".dev-page").prop("disabled", true);
        myDropzone.options.clickable = false;
    }
    else {
        $(".dev-page").prop("disabled", false);
        myDropzone.options.clickable = true;
    }
}


$(document).ready(function(){
    initializeAttachmentsDropzone();
    disableFieldsOnUpdate();
});

当我在浏览器中检查clickable 的值时，它是false，但即使这样我也可以单击附件元素。如何根据需求切换功能？

编辑

对我有用的唯一解决方案如下：

let isRemoveEnabledInAttachments;

function getRemoveEnabled() {
    if ($("#page_details").val()){
        isRemoveEnabledInAttachments = false;
        }
    if ($("#page_details").attr("update_fields") && $("#page_details").attr("has_permission") == "True"){
        isRemoveEnabledInAttachments = true;
    }
    return isRemoveEnabledInAttachments;
}

function initializeAttachmentsDropzone(){
    Dropzone.autoDiscover = false;
    // Dropzone stuff
    myDropzone = new Dropzone("div#attachments", { url: "/app/attachments/",
                        paramName: "attachments",
                        // maxFiles: 10,
                        uploadMultiple: true,
                        addRemoveLinks: true,
                        autoProcessQueue: false,
                        parallelUploads: 10,
                        maxFilesize: 2000,
                        thumbnailHeight: 250,
                        thumbnailWidth: 250,
                        dictRemoveFileConfirmation: "Are you sure you want to delete this file?",
                        accept: function(file, done) {
                          if (file.size == 0) {
                            done("Empty files will not be uploaded.");
                          }
                          else { done(); }
                        },
                        headers: {
                            "X-CSRFToken": csrftoken
                        },
                        init: function(){
                            this.removeAllFiles();
                            if (isRemoveEnabledInAttachments) {
                                this.enable();
                            } else {
                                this.disable();
                            }

                        }
    });
    myDropzone.on("removedfile", deleteAttachment);
}

但即使我禁用了remove file 链接，这里也会显示。

编辑 2

我必须添加

this.options.addRemoveLinks = false;

在init 函数本身内部。即使将其设置为全局变量并使用 cmets 中所述的 Dropzone.options.myDropzone.options 也不起作用。

Answer 1

替换你的函数如下：

    function disableFieldsOnUpdate(){
        if ($("#page_details").val()){
            $(".dz-hidden-input").prop("disabled",true);
         
        }
        else 
{
        $(".dz-hidden-input").prop("disabled",false);
        }
    }