stepper not working with checkbox/radio


Topic: stepper not working with checkbox/radio

Vasileios Valasidis asked 4 years ago

I fixed stepper.js with this new mdbStepper to handle and the checkboxes...

$.fn.mdbStepper = function (options) {
let settings = $.extend({
    linearStepsNavigation: true,
    autoFocusInput: true,
    showFeedbackLoader: true,
    autoFormCreation: true,
    parallel: false // By default we don't assume the stepper is parallel
}, options);
$(document).on('click', (e) => {
    if (!$(e.target).parents(".stepper").length) {
        $('.stepper.focused').removeClass('focused');
    }
});

$(this).each(function () {
    let $stepper = $(this);
    if (!$stepper.parents('form').length && settings.autoFormCreation) {
        var method = $stepper.data('method');
        let action = $stepper.data('action');
        var method = method ? method : "GET";
        action = action ? action : "?";
        $stepper.wrap(`<form action="${action}" method="${method}"></form>`);
    }

    $stepper.data('settings', {
        linearStepsNavigation: settings.linearStepsNavigation,
        autoFocusInput: settings.autoFocusInput,
        showFeedbackLoader: settings.showFeedbackLoader,
        parallel: $stepper.hasClass('parallel')
    });
    $stepper.find('li.step.active').openAction(1);
    $stepper.find('>li').removeAttr('data-last');
    $stepper.find('>li.step').last().attr('data-last', 'true');

    $stepper.on('click', '.step:not(.active)', function () {
        let object = $($stepper.children('.step:visible')).index($(this));
        if ($stepper.data('settings').parallel && validation) { // Invoke parallel stepper behaviour
            $(this).addClass('temp-active');
            $stepper.validatePreviousSteps();
            $stepper.openStep(object + 1);
            $(this).removeClass('temp-active');
        } else if (!$stepper.hasClass('linear')) {
            $stepper.openStep(object + 1);
        } else if (settings.linearStepsNavigation) {
            let active = $stepper.find('.step.active');
            if ($($stepper.children('.step:visible')).index($(active)) + 1 == object) {
                $stepper.nextStep(undefined, true, undefined);
            } else if ($($stepper.children('.step:visible')).index($(active)) - 1 == object) {
                $stepper.prevStep(undefined);
            }
        }
    }).on('click', '.next-step', (e) => {
        e.preventDefault();
        $stepper.nextStep(undefined, true, e);
    }).on('click', '.previous-step', (e) => {
        e.preventDefault();
        $stepper.prevStep(undefined);
    }).on('click', 'button:submit:not(.next-step, .previous-step)', (e) => {
        e.preventDefault();
        let feedback = e ? $(e.target).data("feedback") : undefined;
        var form = $stepper.closest('form');
        if (form.isValid()) {
            if (feedback) {
                stepper.activateFeedback();
                return window[feedback].call();
            }
            form.submit();
        }
    }).on('click', '.form-check-label', function (e) {
        //alert($(this).attr("for"));
        if ($(`#${$(this).attr("for")}`).prop("checked")) {
            $(`#${$(this).attr("for")}`).prop("checked", false).change();
        } else {
            $(`#${$(this).attr("for")}`).prop("checked", true).change();
        }
    }).on('click', function () {
        $('.stepper.focused').removeClass('focused');
        $(this).addClass('focused');
    });
});

};

I added the .form-check-label and with attribute 'for' i took the information ... because all time goes to the last click... I hope to see this change in the next update ...


Krzysztof Wilk staff answered 4 years ago

Hi!

Thanks for your suggestion! We'll try to include it in the next release :)

Best regards


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.2
  • Device: All
  • Browser: All
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No