Отключить элемент html переключателя начальной загрузки без переключения статуса - PullRequest
Новая
       14

Отключить элемент html переключателя начальной загрузки без переключения статуса

0 голосов
/ 13 марта 2019

У меня есть переключатель, определенный следующим образом. 

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

1 Ответ

1 голос
/ 13 марта 2019

Вы можете попробовать этот код.Я указал идентификатор элемента, чтобы функция не вводила в заблуждение.

Дайте мне знать, если проблема все еще возникает.Я был бы рад помочь вам. 

$('#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">
...