Disabling stepper titles using pointer-events none does not

Topic: Disabling stepper titles using pointer-events none does not work

GUIProgrammer asked 3 years ago

Current behavior

I've added using CSS the pointer-events: none to the step-titles, however, it still does not stop the stepper from activating nextStep() or prevStep().

According to another post (https://mdbootstrap.com/support/jquery/stepper-disable-all-steps/) the steps should be disabled.

Expected behavior

I need a JS function that disables all steps. We don't want a user to be able to proceed forward OR backward using the step titles. We only want the continue button in the step actions to proceed forward. We have validation that keeps the continue button disabled until the criteria is met, then it is enabled.

Why was this function not included from the original creators code?

// Enable or disable navigation by clicking on step-titles
   stepTitleNavigation: true,

Under options https://kinark.github.io/Materialize-stepper/

I have provided a snippet here but it is not working with steppers. Also, I cannot get the snippet to work even though I'm using Pro version?


Can I do something along the lines of this? How can I prevent the nextStep() and prevStep() from firing?

$(".disabled-step-navigation").on("click" ,'.step:not(.active)', function (e) {

Mateusz Łubianka staff answered 3 years ago

Hi GUIProgrammer!

Thanks for your post. Our team will check this and we'll answer soon.

Best regards,

GUIProgrammer commented 3 years ago

I have created a solution to this issue myself. I created a copy of the stepper component code, made some additions and included my custom file instead of the other one. The solution was rather simple and I'm disappointed to see not see a response.

Please insert min. 20 characters.


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



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