Disable bootstrap switch html element without toggling status

Question

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>

Florenz · Accepted Answer · 2019-03-14T00:40:51.690

1

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/bootstrap-switch@3.3.4/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">

edited Mar 14 '19 at 00:40

answered Mar 13 '19 at 07:51

Florenz

53
6

Thanks, but I had tried this before to no effect. Yes it disables the element and at the same time toggles the status as well. – Gautam Mar 13 '19 at 08:03
@Gautam have you tried removing `$(this).bootstrapSwitch('state', !data, true);`? Cause I think that is the one toggling the status of your switch. Remove that line and only use `$('#statusToggler').bootstrapSwitch('disabled', true);` – Florenz Mar 13 '19 at 08:10
For a moment I thought that might be the reason. Tried commenting that down. But, it doesn't seem to work. The status is still getting toggled. – Gautam Mar 13 '19 at 08:15
@Gautam I added a code snippet on my post. Kindly check it and use it as reference. – Florenz Mar 13 '19 at 08:33
Thumbs up for the effort. But I am looking for a solution to disable the toggle while clicking it rather than an external button. – Gautam Mar 13 '19 at 08:38
@Gautam I now fully understand what output you really want to obtain. I'll get back to you the soonest – Florenz Mar 13 '19 at 08:59
Hi @Gautam. I updated my post. Is this close to the output you want? – Florenz Mar 14 '19 at 00:41
Thanks, that worked like a charm! Probably this is the right way to catch toggle change. – Gautam Mar 14 '19 at 04:57
Glad to help you @Gautam – Florenz Mar 14 '19 at 05:22

Disable bootstrap switch html element without toggling status

1 Answers1