CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapcheckboxtoggle
Vehlad
Vehlad

Reputation: 155

Bootstrap Toggle: Setting the toggle state of multiple checkbox to '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.

Upvotes: 2

Views: 8227

Answers (1)

andrepaulo
andrepaulo

Reputation: 816

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

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

Upvotes: 5

Related Questions