1

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.

Kirk Ross
  • 6,413
  • 13
  • 61
  • 104

2 Answers2

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");
    }

});
Bertrand Martel
  • 42,756
  • 16
  • 135
  • 159
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/

baryon5
  • 55
  • 6