Change text (label) with jquery ui button toggle

Question

I have a jquery-ui button and I know how to change the styling between states with css, but I would like to know how to change the label text too. For example, an ON/OFF button like below -- when [checked="checked"] then the label text would = "ON" (and OFF when not checked).

<input type="checkbox" id="device_4_state" name="device_4_state" class="toggle-button on-off" checked="checked" />
<label for="device_4_state">ON</label>

Any help would be tremendous. Thanks.

your answer is here stackoverflow.com/questions/13652835/… — Hamid Talebi
– Hamid Talebi, Commented Oct 29, 2013 at 12:20

Bertrand Martel · Accepted Answer · 2013-07-28 03:24:52Z

3

here is the solution :

$('#device_4_state').change(function(){
    if ($("#device_4_state").is(':checked'))
    {
        $("label[for='device_4_state']").text("ON");
    }
    else
    {
        $("label[for='device_4_state']").text("OFF");
    }

});

answered Jul 28, 2013 at 3:24

Bertrand Martel

46k17 gold badges156 silver badges170 bronze badges

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

Comments

affinny · Accepted Answer · 2013-07-28 03:49:23Z

1

If you wish to use pure CSS to set the label text, you can use CSS pseudo elements to automatically generate the content of the label based on the state of the jquery-ui button. To use this approach, leave the label empty (<label for="device_4_state"></label>) and include CSS like this:

.on-off + label > span:before {
    content: "OFF";
}
.on-off + label.ui-state-active > span:before {
    content: "ON";
}

As in this jsfiddle: http://jsfiddle.net/GjPXZ/1/

answered Jul 28, 2013 at 3:49

affinny

556 bronze badges

Collectives™ on Stack Overflow

Change text (label) with jquery ui button toggle

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related