禁用bootstrap switch html元素而不切换状态

Question

我的切换定义如下。

<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">

我正在使用boostrap开关来显示切换弹出窗口。我想在显示确认弹出窗口以更改状态之前禁用input元素。我已尝试过所有内容，但在尝试禁用该元素时，切换的状态也会发生变化。这是我的代码。

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


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

    ...
    ..
});

这是我提到的解决方案。 https://stackoverflow.com/a/39182836/6554834

下面给出了使用bootstrap开关后最终的html渲染。

<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>

Answer 1

您可以尝试此代码。我指定了元素ID，以便该函数不会被误导。

如果问题仍然存在，请告诉我。我很乐意帮助你。

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

您可以参考此代码段

$(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">