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

以下是使用引导开关后呈现的最终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/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">

在不切换状态的情况下禁用引导程序开关html元素

1 个答案: