How can i disable the toggle, preventing user to tap/click it?

Question

I've tried

$(".toggle-handle").addClass("disabled")
$(".toggle").addClass("disabled")
$(".toggle-handle").off();
$(".toggle").off();

without success. I have forms that is just informative once saved to I would like to have them not clickable.

Answer 1

Disable is a property of the element:

$(".toggle-handle").prop('disabled', true);

Demo:

$(".toggle-handle").prop('disabled', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-handle">Button</button>

Or using vanilla JS:

document.querySelector('.toggle-handle').disabled = true;

Demo:

document.querySelector('.toggle-handle').disabled = true;

<button class="toggle-handle">Button</button>

Answer 2

Here you go with one more solution using CSS property.

button {
  pointer-events: none;
}

<button>Click ME!!!</button>

If you want to remove the disabled property, then set CSS property to

pointer-events: auto;

Hope this will help you.