I am using Bootstrap Toggle plugin which converts checkboxes into toggle buttons.

<input type="checkbox" id="c1" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-size="small" data-onstyle="success">
<input type="checkbox" id="c2" data-toggle="toggle" data-on="Style" data-off="Style" data-size="small" data-onstyle="success">
<input type="checkbox" id="c3" data-toggle="toggle" data-on="Border" data-off="Border" data-size="small" data-onstyle="success">

Its working well but having problem in turning the state of checkbox to off/unchecked.

just like we use on checkbox:

$("#c1,#c2,#c3").prop('checked', false);

As per documentation Bootstrap Toggle plugin use function "Off" to turn off But this is not working:

$("#c1,#c2,#c3").bootstrapToggle('off');

whereas

$("#c1,#c2,#c3").bootstrapToggle('disable');

works & disable all the three checkboxes.

But i dnt want to disable, just turn off all the toggle buttons programmatically. Tried with each separate line of code:

$("#c1").bootstrapToggle('off'); 
$("#c2").bootstrapToggle('off');
$("#c3").bootstrapToggle('off');

But only One (1st element) get turned off & my next script stops after that.

P.S.

i am using this off function inside another function:

    function reset_all(){
       // other fields resets
       // input default values to reset
       // hide select options & other fields
       $("#c1,#c2,#c3").bootstrapToggle('off');
    }

which should work on click of reset button:

$('#btnReset').on("click",function(e){
        e.preventDefault();
        reset_all();
       // alert message display 
      // 
});

there is some bug in the plugin ? or something wrong in my code !

EDIT

I just figured out that this function works when checkboxes turned ON But stop working when these checkboxes already in Off state.

i.e. checkboxes got turned OFF when they set to ON but when they already OFF & i run bootstrapToggle('off') function then it stops the next code.

How can i detect which checkbox is turned "On" & only that checkbox got "Off" & If all are ON then all got off.

I am using Bootstrap Toggle plugin which converts checkboxes into toggle buttons.

<input type="checkbox" id="c1" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-size="small" data-onstyle="success">
<input type="checkbox" id="c2" data-toggle="toggle" data-on="Style" data-off="Style" data-size="small" data-onstyle="success">
<input type="checkbox" id="c3" data-toggle="toggle" data-on="Border" data-off="Border" data-size="small" data-onstyle="success">

Its working well but having problem in turning the state of checkbox to off/unchecked.

just like we use on checkbox:

$("#c1,#c2,#c3").prop('checked', false);

As per documentation Bootstrap Toggle plugin use function "Off" to turn off But this is not working:

$("#c1,#c2,#c3").bootstrapToggle('off');

whereas

$("#c1,#c2,#c3").bootstrapToggle('disable');

works & disable all the three checkboxes.

But i dnt want to disable, just turn off all the toggle buttons programmatically. Tried with each separate line of code:

$("#c1").bootstrapToggle('off'); 
$("#c2").bootstrapToggle('off');
$("#c3").bootstrapToggle('off');

But only One (1st element) get turned off & my next script stops after that.

P.S.

i am using this off function inside another function:

    function reset_all(){
       // other fields resets
       // input default values to reset
       // hide select options & other fields
       $("#c1,#c2,#c3").bootstrapToggle('off');
    }

which should work on click of reset button:

$('#btnReset').on("click",function(e){
        e.preventDefault();
        reset_all();
       // alert message display 
      // 
});

there is some bug in the plugin ? or something wrong in my code !

EDIT

I just figured out that this function works when checkboxes turned ON But stop working when these checkboxes already in Off state.

i.e. checkboxes got turned OFF when they set to ON but when they already OFF & i run bootstrapToggle('off') function then it stops the next code.

How can i detect which checkbox is turned "On" & only that checkbox got "Off" & If all are ON then all got off.

• javascript
• jquery
• twitter-bootstrap
• checkbox
• toggle

• 1 Seems to work fine. jsfiddle/isherwood/e5Lg47fz – isherwood Commented Sep 18, 2015 at 18:57
• Errors in the console? – isherwood Commented Sep 18, 2015 at 18:59
• i am using this off code in another function: function reset_all(){ } which works on click of reset button just like we use to reset all form elements and form values to default. then $('#btnReset').on("click",function(e){ reset_all(); }) – Vehlad Commented Sep 18, 2015 at 19:17
• thanks @isherwood i moved the bootstrapToggle('off') code to On Reset button click function instead of reset_all() now its working. Why not working under reset_all function call? Its useful if I want to call reset_all function again during execution . – Vehlad Commented Sep 18, 2015 at 19:29
• I see no reason that wouldn't work. You haven't answered my question. – isherwood Commented Sep 18, 2015 at 19:37

1 Answer 1

change() at the end of your event call, as I did.

$("#c1,#c2,#c3").prop('checked', false).change();