JSFiddle - React, Tailwind, and code Playground

by eddiemonge

HTML

<form class="js-disable-publish">
    <input type="text" name="title" />
    <br /><br/><p>
    <textarea name="description"></textarea>
    <input type="submit" disabled />
</form>

JavaScript

(function($) {
    var methods = {
        init: function(options) {
            var settings = $.extend({
                'input': 'title',
                'textarea': 'description'
            }, options);

                console.log( this );
            
            return this.each(function() {
                var $this = $(this),
                $input = $this.find('input[name="title"]'),
                $textarea = $this.find('textarea[name="description"]'),
                $submit = $this.find('input[type="submit"]');
                
                $input.keyup(function() {
                    if ($input.val() && $textarea.val()) {
                $submit.removeAttr('disabled');
                    } else {
                        $submit.attr('disabled', true);
                    }
                });
                $textarea.keyup(function() {
                    if ($input.val() && $textarea.val()) {
                $submit.removeAttr('disabled');
                    } else {
                        $submit.attr('disabled', true);
                    }
                });
                
            });

        }
    };

    $.fn.disablePublish = function(method) {

        // Method calling logic
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            return false; 
        }

    };

    $('.js-disable-publish').disablePublish();
})(jQuery);