如何使用 javascript 將引導開關從 ON state 更改為 OFF state

Question

如何使用 javascript 將引導開關從 OFF state 更改為 ON state。

開關 html 代碼如下，

<input type="checkbox" class="alert-status" name="ab1" id="ab1" data-size="normal" data-on-text="OFF" data-off-text="ON" checked data-bootstrap-switch data-off-color="success" data-on-color="danger">

腳本代碼，

$('.alert-status').bootstrapSwitch('state', false);

我嘗試了一些步驟但沒有得到它

Answer 1

好吧，它只是一個“復選框”，所以您是否嘗試過（將其打開）： $('#ab1').prop('checked', true); 使用false將其關閉。

編輯：是的，這有效。 Go 到 Bootstrap 文檔：https://getbootstrap.com/docs/5.1/forms/checks-radios/#switches並在瀏覽器的控制台中寫入： document.getElementById('flexSwitchCheckDefault').checked = true; 並注意“默認開關復選框輸入”已打開。

Answer 2

您需要通過 id 獲取復選框，然后將checked屬性設置為 true 或 false：

document.getElementById('ab1').checked = true; - ON state

document.getElementById('ab1').checked = false; - 關閉 state

為了良好的實踐，讓我們將它們包裝到函數中：

function setToOn(){
  document.getElementById('ab1').checked = true;
}

function setToOff(){
  document.getElementById('ab1').checked = false;
}

Answer 3

 $('.switch').bootstrapSwitch('state'); $('.switch').on('switchChange.bootstrapSwitch', function() { var check = $('.bootstrap-switch-on'); switch (check.length) { case 0: console.log('OFF', check.length) break; case 1: console.log('ON', check.length) break; default: // code block } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script> <input type="checkbox" class="switch" data-on-color="primary" data-off-color="primary" value="true">