Jquery ReEnable disable button

Question

For file upload, I've used a WordPress plugin.

Here I want to control the maximum number of file upload. I'm able to disable the upload plugin when user upload the max number file.
But after disabling the upload button, when the user delete a file and want to upload a new file he can't. How do I reEnable the disbale upload button? I've disabled the upload button, count with the total number of input class.

jQuery(document).ready(function() {
    var limit = 3;
    jQuery('.qbutton').on('click', function() {
        if (jQuery(".mfcf7-zl-multifile-name").length == limit) {
            jQuery(this).attr("disabled", "disabled");
        }
    });
    jQuery('.mfcf7_zl_delete_file').on('click', function() {
        if (jQuery(".mfcf7-zl-multifile-name").length < limit) {
            jQuery('.qbutton').removeAttr("disabled");
        }
    });
});

update: Event listener not work for dynamically create class .mfcf7_zl_delete_file
After removing attach file click event not trigged.

Answer 1

I believe you just need to update your condition:

jQuery(document).on('click', '.mfcf7_zl_delete_file', function() {
    // do the following stuff after deleting the file
    if (jQuery(".mfcf7-zl-multifile-name").length < limit) {
        jQuery('.qbutton').removeAttr("disabled");
    }
});

Answer 2

I think, Your on click event is not getting triggered. Also need to re-check the condition.

jQuery(document).on('click', 'mfcf7_zl_delete_file', function(){ 
     if (jQuery(".mfcf7-zl-multifile-name").length < limit) {
            jQuery('.qbutton').removeAttr("disabled");
        }
});

Answer 3

the element no yet exists you have to add listener from the dom selector try this

var $file = jQuery(".mfcf7-zl-multifile-name");
jQuery(document).on('click', $file, function(){
   if ($file.length < limit) {
        jQuery('.qbutton').removeAttr("disabled");
   }
}) 

you can use document or any parent element

Answer 4

Since the target element doesn't exist on the page when the document is ready no event is attached to the elements that are created after selecting files for upload. Use delgation like

// $('container element').on('trigger name', 'dynamic target', function(e) {
    // do something
// });

jQuery('.mfcf7_zl_multifilecontainer').on('click', '.mfcf7_zl_delete_file', function(e) {
    if (jQuery(".mfcf7-zl-multifile-name").length >= limit) {
        jQuery('.qbutton').prop("disabled", false);
    }
});

This will capture clicks on any .mfcf7_zl_delete_file that were added to .mfcf7_zl_multifilecontainer after the page was loaded.

By the way, notice that I used .prop() instead of working with attr() , see my comment on your question for details.

EDIT: Appears like wordpress adds elements dynamically. I have not much knowledge of wordpress. Try this:

jQuery(document).ready(function() {
    var limit = 3;
        jQuery(document).on('change', '.mfcf7_zl_multifilecontainer', function() {
        if(jQuery('body').find(".mfcf7-zl-multifile-name").length >= limit) {
            jQuery('body').find('.qbutton').attr("disabled", "disabled");
        } else {
            jQuery('body').find('.qbutton').removeAttr("disabled");
        }
    });
});

You can use an element (must be in the DOM path to body from your .qbutton ) that you know for sure exists on page load instead of body in above code