Bouton radio jQuery UI - comment passer correctement à l'état coché

Question

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

Je veux modifier leur état de vérification. Cependant, lorsque je le fais de manière programmatique sur l'événement change du conteneur avec :

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

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

J'ai parcouru la documentation de jQuery UI sur l'onglet 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 problème est que l'appel de la fonction $("selector").button("disable"); ne modifie pas l'état actif du bouton. Le bouton radio sous-jacent est correctement coché, mais l'état actif de l'interface utilisateur ne change pas. J'obtiens donc un bouton grisé qui semble toujours coché, et le bouton réellement sélectionné apparaît non coché.

Solution

$("selector").button("enable").button("refresh");

Answer 1

Vous devez appeler le refresh après avoir modifié l'état sous-jacent :

Rafraîchit l'état visuel du bouton. Utile pour mettre à jour l'état du bouton après que l'état coché ou désactivé de l'élément natif a été modifié par programme.

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

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 de jQuery contenant les données pertinentes. input[type=radio] élément.

Answer 2

Malgré les messages qui disent le contraire, vous POUVEZ référencer un bouton radio par ID. Je ne sais pas pourquoi JQuery UI ne rafraîchit pas automatiquement les boutons lorsqu'ils sont cochés, mais vous pouvez le faire 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>

Answer 3

Réinitialise tous les boutons radio, mais vous pouvez être plus spécifique avec le sélecteur.

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

Answer 4

En regardant le code vous devez activer l'option ui-state-active mais le moyen le plus simple est sans doute de se contenter de $('someradiobutton').trigger('click') (ou si vous ne voulez pas que vos gestionnaires d'événements personnalisés s'exécutent, $('someradiobutton').trigger('click.button') ).

Answer 5

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 que le "radioButton" cliqué 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 Buttonset :

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