Disable bootstrap switch html element without toggling status

I have a toggle defined as follows.

<input type="checkbox"
  id="statusToggler"
  class="form-control switch conf-switch-state"
  data-label-text="Status"
  checked="true" 
  data-inverse="true"
  data-size="small" 
  data-off-color="warning"
  data-on-text="Active" 
  data-off-text="Disabled">

I am using boostrap switch to show a popup on toggling it. And I want to disable the input element, before showing a confirmation popup to change the status. I have tried everything, but the status of the toggle also gets changed when trying to disable the element. Here is my code.

$("input.conf-switch-state").bootstrapSwitch();


$('input.conf-switch-state').on('switchChange.bootstrapSwitch', function (e, data) {
    $(this).bootstrapSwitch("disabled",true);
    $(this).bootstrapSwitch('state', !data, true);

    ...
    ..
});

Here is the solution that I had referred. https://stackoverflow.com/a/39182836/6554834

Given below is the final html getting rendered after using bootstrap switch.

<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-small bootstrap-switch-inverse bootstrap-switch-id-hellohello bootstrap-switch-animate" style="width: 116px;">
<div class="bootstrap-switch-container" style="width: 170px; margin-left: -56px;">
    <span class="bootstrap-switch-handle-off bootstrap-switch-warning" style="width: 56px;">Disabled</span>
    <span class="bootstrap-switch-label" style="width: 58px;">Status</span>
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 56px;">Active</span>
    <input type="checkbox" name="confStatus" id="statusToggler" class="form-control switch conf-switch-state" data-label-text="Status" checked="true" data-inverse="true" data-size="small" data-off-color="warning" data-on-text="Active" data-off-text="Disabled">
</div>
</div>

Solution

You can try this code. I specified the element ID so that the function will not be mislead.

Let me know if problem still occur. I'd be glad to help you.

$('#statusToggler').bootstrapSwitch('disabled', true);

You can refer to this code snippet

$(function() {
  $("input.conf-switch-state").bootstrapSwitch({
    onSwitchChange: function(event, state) {
      alert('This is a sample notification');
      $(this).bootstrapSwitch('disabled', true);
      return false;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap-switch.js"></script>
<link href="https://unpkg.com/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet" />

<div>
  <input type="checkbox" id="statusToggler" class="form-control switch conf-switch-state" data-label-text="Status" checked="true" data-inverse="true" data-size="small" data-off-color="warning" data-on-text="Active" data-off-text="Disabled">