bootstrap-touchspin on disabled inputs the +/- buttons should be disabled as well

on disabled inputs the +/- buttons should be disabled as well

Open sba opened this issue 10 years ago • 7 comments

it sets the buttons to disabled if the input (on which touchspin is applied) is disabled

Dec 11 '13 15:12 sba

We need a solution for enabling the +- buttons when enabling the input. It would be great to do it with a trigger but I have no luck when searching for a related one. An alternative solution is to provide touchspin.enable and touchspin.disable events.

Dec 11 '13 22:12 istvan-ujjmeszaros

I absolutely agree with this. I searched as well but had also no luck... $('form').on('disable', 'input', function () { ... seems to work, but I did not figured out how to bind enable event

Dec 12 '13 09:12 sba

That would really be something necessary. Thus disabling the mousewheel in this case. I created a custom knockout binding to use with this and I have to force disable buttons and disable mousewheel, see:

ko.bindingHandlers.touchSpin = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var allBindings = allBindingsAccessor(),
                value = ko.utils.unwrapObservable(valueAccessor()),
                touchSpinOptions = allBindings.touchSpinOptions || {},
                defaults = ko.bindingHandlers.touchSpin.defaults,
                $element = $(element);

            var options = $.extend(false, { initval: value }, defaults, touchSpinOptions);

            ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor);
            $element.TouchSpin(options);
            ko.bindingHandlers.touchSpin.updateEnableState(element, allBindings);
        },
        update: function (element, valueAccessor, allBindingsAccessor) {
            var allBindings = allBindingsAccessor();

            ko.bindingHandlers.value.update(element, valueAccessor);
            ko.bindingHandlers.touchSpin.updateEnableState(element, allBindings);
        },
        updateEnableState: function (element, allBindings) {
            var $element = $(element),
                $plus = $element.parent().find(".bootstrap-touchspin-up"),
                $minus = $element.parent().find(".bootstrap-touchspin-down");

            if (allBindings.enable !== undefined) {
                if (ko.utils.unwrapObservable(allBindings.enable) === true) {
                    $plus.removeAttr('disabled');
                    $minus.removeAttr('disabled');
                    // $element.trigger("touchspin.updatesettings", { mousewheel: true });
                } else {
                    $plus.attr('disabled', 'disabled');
                    $minus.attr('disabled', 'disabled');
                    // $element.trigger("touchspin.updatesettings", { mousewheel: false });
                }
            }

            if (allBindings.disable !== undefined) {
                if (ko.utils.unwrapObservable(allBindings.disable) === false) {
                    $plus.removeAttr('disabled');
                    $minus.removeAttr('disabled');
                    // $element.trigger("touchspin.updatesettings", { mousewheel: true });
                } else {
                    $plus.attr('disabled', 'disabled');
                    $minus.attr('disabled', 'disabled');
                    // $element.trigger("touchspin.updatesettings", { mousewheel: false });
                }
            }
        },
        defaults: {
            min: 0,
            max: 100,
            initval: "",
            step: 1,
            decimals: 0,
            stepinterval: 100,
            forcestepdivisibility: 'round',  // none | floor | round | ceil
            stepintervaldelay: 500,
            prefix: "",
            postfix: "",
            prefix_extraclass: "",
            postfix_extraclass: "",
            booster: true,
            boostat: 10,
            maxboostedstep: false,
            mousewheel: false, // Aguarda fixar ou incluir o disabled corretamente
            buttondown_class: "btn btn-default",
            buttonup_class: "btn btn-default"
        }
    };