webentwicklung-frage-antwort-db.com.de

Optionsfeld "jQuery UI" - So wechseln Sie den aktivierten Status

Ich habe eine Reihe von Optionsfeldern, die alle mit .button() von jQuery UI gestaltet sind.

Ich möchte ihren überprüften Zustand ändern. Wenn ich dies jedoch programmgesteuert für das Änderungsereignis des Containers tue, gilt Folgendes:

$("#myradio [value=1]").attr("checked", false);
$("#myradio [value=2]").attr("checked", true);

Die Werte werden korrekt geändert, aber das UI-Styling zeigt weiterhin das nicht aktivierte Optionsfeld mit dem aktivierten Style an, und das aktivierte sieht immer noch nicht aktiviert aus.

Ich habe die jQuery-UI-Dokumentation zur button() -Methode für Optionsfelder durchgesehen, aber es gibt keine Anleitung zum Ändern des Status und Aktualisieren des UI-Stils.

Das Problem besteht darin, dass der Aufruf des Codes $("selector").button("disable"); den aktiven Status der Schaltfläche nicht ändert - das zugrunde liegende Optionsfeld ist korrekt markiert, der aktive Status der Benutzeroberfläche ändert sich jedoch nicht. Ich erhalte also eine ausgegraute Schaltfläche, die aussieht, als wäre sie noch aktiviert, und die tatsächlich ausgewählte Schaltfläche wird deaktiviert angezeigt.

Lösung

$("selector").button("enable").button("refresh");
47
Antony Carthy

Sie müssen die refresh -Methode aufrufen, nachdem Sie den zugrunde liegenden Status geändert haben:

Aktualisiert den visuellen Status der Schaltfläche. Nützlich zum Aktualisieren des Schaltflächenstatus, nachdem der aktivierte oder deaktivierte Status des nativen Elements programmgesteuert geändert wurde.

Arbeitsbeispiel: http://jsbin.com/udowo

function setRadio(id) {
    var radio = $('#' + id);
    radio[0].checked = true;
    radio.button("refresh");
}

Das verwendet IDs für die Funkgeräte, aber es spielt keine Rolle, solange Sie eine jQuery-Instanz erhalten, die das relevante input[type=radio] Element.

57
T.J. Crowder

Trotz gegenteiliger Beiträge können Sie ein Optionsfeld anhand seiner ID referenzieren. Sie sind sich nicht sicher, warum die JQuery-Benutzeroberfläche die Schaltflächen nicht automatisch aktualisiert, wenn diese Option aktiviert ist. Sie tun dies jedoch folgendermaßen:

$('selector').attr('checked','checked').button("refresh");

Arbeitsbeispiel:

<div id = "buttons">
 <label for="b1">button1</label>
 <label for="b2">button2</label>
 <label for="b3">button3</label>

 <input type="radio" name = "groupa" id = "b1" value="b1">
 <input type="radio" name = "groupa" id = "b2" value="b2">
 <input type="radio" name = "groupa" id = "b3" value="b3">
</div>

<script>
  $('#buttons input').button();     
  $('#b3').prop('checked', true).button("refresh");
</script>
18
Salah B

Wenn Sie sich code ansehen, müssen Sie die Klasse ui-state-active Umschalten, aber der einfachste Weg ist wahrscheinlich nur $('someradiobutton').trigger('click') (oder wenn Sie Ihr benutzerdefiniertes Ereignis nicht möchten) Handler ausführen, $('someradiobutton').trigger('click.button')).

1
Tgr

Wenn dieses Problem weiterhin auftritt, verwenden Sie Folgendes:

.prop('checked',true);

anstatt von:

.attr("checked", true);
1
Mohit

Setzt alle Optionsfelder zurück, aber Sie können mit dem Selektor spezifischer werden.

$( 'input:radio' )
     .removeAttr('checked')
     .removeAttr('selected')
     .button("refresh");
1
Mike

Ich habe es gelöst, indem ich das Buttonset mit setTimeout komplett zurückgesetzt habe.

Fügen Sie dem zu bestätigenden Optionsfeld ein Klickereignis hinzu.
Bitte beachten Sie den angeklickten 'radioButton' und das vollständige 'radioSet' im Code unten:

$('#radioButton').click(function(){
    if(confirm('Confirm Text') != true){
       resetButtonset('#radioSet', 200);
       return false;
    };
});

Erstellen Sie eine praktische Funktion, die Ihr Buttonset zurücksetzt:

function resetButtonset(name, time){
    setTimeout(function(){$(name).buttonset();}, time);
}
0