web-dev-qa-db-fra.com

Bouton radio jQuery UI - comment changer correctement l'état vérifié

J'ai un ensemble de boutons radio, tous stylisés avec .button() de jQuery UI.

Je veux changer leur état vérifié. Cependant, lorsque je le fais par programme sur l'événement de changement du conteneur avec:

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

Les valeurs sont modifiées correctement, mais le style de l'interface utilisateur affiche toujours le bouton radio non coché avec le style coché, et celui coché semble toujours non coché.

J'ai parcouru la documentation jQuery UI sur la méthode button() pour les boutons radio, mais il n'y a rien sur la façon de changer l'état et de mettre à jour le style de l'interface utilisateur.

En résumé, le fait d'appeler le code $("selector").button("disable"); ne modifie pas l'état actif du bouton - le bouton radio sous-jacent est correctement vérifié, mais l'état actif de l'interface utilisateur ne change pas. Donc, je reçois un bouton grisé qui semble être toujours coché et le vrai bouton sélectionné n'apparaît pas.

Solution

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

Vous devez appeler la méthode refresh après avoir changé l'état sous-jacent:

Actualise l'état visuel du bouton. Utile pour mettre à jour l'état du bouton une fois que l'état vérifié ou désactivé de l'élément natif est modifié par programme.

Exemple de travail: http://jsbin.com/udowo

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

Cela utilise des ID pour les radios, mais cela n'a pas d'importance tant que vous obtenez une instance jQuery contenant le input[type=radio] élément.

57
T.J. Crowder

Malgré les messages contraires, vous POUVEZ référencer un bouton radio par ID. Je ne sais pas pourquoi JQuery UI ne rafraîchit pas les boutons automatiquement lorsqu'il est coché, mais vous le faites comme ceci:

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

Exemple de travail:

<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

En regardant code , vous devez basculer la classe ui-state-active, Mais le moyen le plus simple est probablement juste $('someradiobutton').trigger('click') (ou si vous ne voulez pas votre événement personnalisé gestionnaires à exécuter, $('someradiobutton').trigger('click.button')).

1
Tgr

Si quelqu'un rencontre toujours ce problème, utilisez:

.prop('checked',true);

au lieu de:

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

Réinitialise tous les boutons radio mais vous pouvez être plus précis avec le sélecteur.

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

Je l'ai résolu en réinitialisant complètement le Buttonset avec setTimeout.

Ajoutez un événement de clic au bouton radio qui nécessite une confirmation.
Veuillez noter le bouton "radioButton" et le "radioSet" complet dans le code ci-dessous:

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

Créez une fonction pratique qui réinitialise votre jeu de boutons:

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