Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

how to apply function to next button

How can adapt and apply this function to make it work with my next button ("div.submit_div"):


(function($) {
    $.fn.fadeAndDisable = function(delay) {
        delay = delay || 500;
        return this.each(function() {
            $(this).fadeTo(0.5, delay, function() {
                $(this).attr('disabled', 'disabled');
            })
        });
    }

    $.fn.fadeAndEnable = function(delay) {
        delay = delay || 500;
        return this.each(function() {
            $(this).fadeTo(1, delay, function() {
                $(this).removeAttr('disabled');
            })
        });
    }

})(jQuery);
jsFiddle.

Usage

$('input').fadeAndDisable(1000);
$('input').fadeAndEnable(1000);
asked Jun 16, 2016 by Valeria Toledo
retagged Jun 20, 2016 by Walter Williams

1 Answer

0 votes
Stack Overflow is an absolutely fantastic resource for getting programming help, especially in JavaScript / jQuery.  Unfortunately, that particular answer is a bit old and could use some dusting off.

First, the answer uses 'attr' and 'removeAttr' to disable / enable the element.  Nowadays, it's standard to use the 'prop' function instead.

Second, it seems like the answer's 'fadeTo' parameters are in the wrong order.

Making both of these fixes and changing 'input' to 'div.submit_div' results in this:

<script type="text/javascript">
// Disable / enable functions
(function($) {
    $.fn.fadeAndDisable = function(delay) {
        delay = delay || 500;
        return this.each(function() {
            $(this).fadeTo(delay, 0.5, function() {
                $(this).prop('disabled', true);
            })
        });
    }

    $.fn.fadeAndEnable = function(delay) {
        delay = delay || 500;
        return this.each(function() {
            $(this).fadeTo(delay, 1, function() {
                $(this).prop('disabled', false);
            })
        });
    }
})(jQuery);

// Survey runtime
$(document).ready(function(){
    $('div.submit_div').fadeAndDisable(1000);
    $('div.submit_div').fadeAndEnable(5000);
})
</script>


As is, this code disables the submit div over 1 second, then enables it over 5 seconds.  If you have further specifications (e.g., only enable after they enter text), I would be happy to edit the code to do that.

A quick heads up: in programming, we usually talk about time in milliseconds rather than seconds.  That's why 1000 -> 1 second and 5000 -> 5 seconds.
answered Jun 16, 2016 by Zachary Platinum Sawtooth Software, Inc. (84,025 points)
Hi Zachary your code work, but is not doing exactly what I want it to do it. I want the button to have opacity for few seconds and for the same amount of time deny the possibility for clicking it. Then make it clear and allow to click on it.
With your code (using 5000 fade-disable and 2000 fade-enable) , I could give opacity to the button but I was able to click on it all the time. Is it possible to change this?
...