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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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