bootstrap toggle checkbox button label changed by jquery

Question

I need to change label of toggle button with data-on and data-off style. How can I do it? My toggle create as under html.

Sending OnSending Off

I've created button as under js code:

 $("#allOnOff").bootstrapToggle({   
  on            :   "Sending On",
  off           :   "Sending Off",
  onstyle       :   "success",
  offstyle      :   "danger"        
 });

And I need to change it as under:

$("#allOnOff").bootstrapToggle({
  on            :   "Custom",
  off           :   "Sending Off",
  onstyle       :   "warning",
  offstyle      :   "danger"
 });

But it's not make any changes. Please help.

<input type="checkbox" id="allOnOff" data-toggle="toggle" checked class="emailOnOff" data-size="normal" data-onstyle="success" data-offstyle="danger" data-on="Sending On" data-off="Sending Off"></th> — Waqas Baig
– Waqas Baig, Commented Mar 21, 2017 at 12:50

Rana Ghosh · Accepted Answer · 2017-03-21 14:17:38Z

1

As you are changing label from JS you don't need to put that in HTML. You should replace your HTML with below code::

<input type="checkbox" id="allOnOff" data-toggle="toggle" checked class="emailOnOff" data-size="normal" data-onstyle="success" data-offstyle="danger">

And keep your JS code as it is.

Working JSFIDDLE LINK:: https://jsfiddle.net/cswuL90j/

edited Mar 21, 2017 at 14:17

answered Mar 21, 2017 at 13:15

Rana Ghosh

4,6745 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

bootstrap toggle checkbox button label changed by jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related