[FRAGE] Button-Text ändern, Button-Größe ändert sich

[Ciatronical]

Hey All,

ich habe einen Button dessen Text sich nach dem Klick ändern soll.
Nun ändert sich zwar der Text doch der Button wird sehr klein.
JSFiddle

<p><button id="test0">ON</button></p>

<input type="checkbox" id="test1" name="test1"  checked="checked" />
<label for="test1">ON</label>

$("#test0").button().click(function () {
    $(this).text(function(i, text){
        return text === "ON" ? "OFF" : "ON";
    });//.button("refresh");
      		//return false;
})

$('#test1').change(function(){
    if ($("#test1").is(':checked')){
        $("label[for='test1']").text("ON");//.button("refresh");
    }
    else{
        $("label[for='test1']").text("OFF");//.button("refresh");
    }
    //return false;
}).button();

Wie kann ich das verhindern??

Dank und Gruß

Ronny

 

[mikdoe]

"refresh" erzeugt bei mir einen JS Fehler. Was/wozu ist das? Die Browserkonsole (F12) hast du offen, wenn du solche Sachen testest?

 

[Ciatronical]

Es war gedacht den Button wieder auf die originale Größe zu bringen.
Ist jetzt wieder kommentiert.

- - - Aktualisiert - - -

Das eigentliche Problem wurde damit jedoch nicht gelöst..
http://jsfiddle.net/Ciatronical/hqsyc178/

- - - Aktualisiert - - -

Ok, es funktioniert mit label.

$("#test0").button().click(function () {
    $(this).text(function(i, text){
        if( text === "ON" )$( "#test0" ).button( "option", "label", "OFF" ); 
        else $( "#test0" ).button( "option", "label", "ON" ); 
    });
})

$('#test1').change(function(){
    if ($("#test1").is(':checked')){
        $( "#test1" ).button( "option", "label", "ON" );       
    }
    else{
        $( "#test1" ).button( "option", "label", "OFF" );      
    }

}).button();

Siehe: Edit fiddle - JSFiddle