Question 11381 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

how to change a bootstrap switch from ON state to OFF state using javascript – Jquery

how to change a bootstrap switch from OFF state to ON state using javascript.

the switch html code is below,

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

script code,

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

i tried some steps way but did not get it

Tags:

3

Answers


  1. 0

    Well, it’s just ‘a checkbox’, so have you tried (to turn it ON):
    $('#ab1').prop('checked', true);
    Use false to turn it off.

    Edit: Yes this works. Go to the Bootstrap docs: https://getbootstrap.com/docs/5.1/forms/checks-radios/#switches
    And write in the console of your browser:
    document.getElementById('flexSwitchCheckDefault').checked = true;
    And notice the "Default switch checkbox input" is turned on.

    Login or Signup to reply.
  2. 0

    You need to get the checkbox by id and then set the checked property to true or false:

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

    document.getElementById('ab1').checked = false; – for OFF state

    For the sake of good practice let’s just wrap them into functions:

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

function setToOff(){
  document.getElementById('ab1').checked = false;
}
    Login or Signup to reply.
  3. 0 
    $('.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">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search