disabling and enabling bootstrap switch using jquery

Question

I am using bootstrap switch and currently got stuck as there aren't any strong documentation or examples that I could get access to.

<div class="col-xs-6">
  <div class="pull-left">
     <input class="switch" type="checkbox" id="cb_project_status"  name="cb_project_status" 
        <?php if($data_p_projectstatus=="ACTIVE") echo("checked"); else echo("");?> 
        data-on-color="success" data-off-text="Inactive" data-on-text="Active" 
        data-off-color="warning" data-size="mini" disabled>
     </div> 
 </div>

On document ready of js file, I do

$("#cb_project_status").bootstrapSwitch();

and have attached in in the php page

 <link rel="stylesheet" href="css/bootstrap-switch.min.css">

I need to achieve the following functionality: Unless user enters all mandatory fields, the switch button needs to be disabled.

if($.fn.validateFormInputs()){
   // enable bootstrap switch
}else{
   // disable bootstrap switch
}

What is the jQuery command to enable/disable bootstrap switch. Thanks!

score 39 · Accepted Answer · edited Sep 22 '17 at 11:23

39

You can do it in many ways as below:

DEMO

Using options

Type 1

With initialization

$("[name='my-checkbox']").bootstrapSwitch({
    disabled:true
});

Type 2

After initialization

$("[name='my-checkbox']").bootstrapSwitch(); //initialized somewhere
$("[name='my-checkbox']").bootstrapSwitch('disabled',true);

Using Method

$("[name='my-checkbox']").bootstrapSwitch(); //initialized somewhere
$("[name='my-checkbox']").bootstrapSwitch('toggleDisabled',true,true);

Documentation

edited Sep 22 '17 at 11:23

daremon

4,894
2
27
27

answered Sep 12 '15 at 15:22

Guruprasad J Rao

29,410
14
101
200

After using : $("[name='my-checkbox']").bootstrapSwitch('disabled',true); https://photos.app.goo.gl/z1itgtTMynMfVdYu2 – Marc Roussel Nov 18 '17 at 17:27
1

If you have a custom bootstrap-switch (with images and such) it reverts to the default switch which is not preferred. I fixed this by disabling it on initialization and then re-enable it when needed. – Roland Dec 04 '17 at 10:47

score 0 · Answer 2 · answered Dec 18 '16 at 02:20

If you enable and disable a lot you can also write your own methods:

$.fn.disable_switch = function() {
  this.bootstrapSwitch('toggleDisabled',true,true);
};

$.fn.enable_switch = function() {
  this.bootstrapSwitch('toggleDisabled',true,true);
};

Usage:

$("[name='my-checkbox']").disable_switch()

disabling and enabling bootstrap switch using jquery

2 Answers2