Comment faire pour que les boutons radio fonctionnent dans un accordéon JQuery UI?

J'ai cherché et quelques personnes ont demandé ceci mais personne n'a donné une réponse adéquate et la plupart des demandeurs n'ont pas fourni le code d'exemple utile. Je l'ai réduit à la seule chose que j'essaie de faire mais qui ne fonctionne pas. L'accordéon fonctionne mais pas les boutons radio. Y a-t-il un moyen de faire fonctionner cela?Comment faire pour que les boutons radio fonctionnent dans un accordéon JQuery UI?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" /> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script> 
    <title>Test</title> 
    <script type="text/javascript"> 
     $(document).ready(
     function() 
     { 
      $('#mystuff').accordion(
      { 
       header: "div.hdr", 
       collapsible: true, 
       heightStyle: "content" 
      }); 
     } 
    ); 
    </script> 
    </head> 
    <body> 
    <form> 
     <div id="mystuff"> 
     <div class="hdr"> 
      <span><input type="radio" name="r1" value="A" checked="checked" /></span> 
      <span>Choose A</span> 
      <span><input type="radio" name="r1" value="B" /></span> 
      <span>Choose B</span> 
     </div> 
     <div> 
      This is the body for 1. 
     </div> 
     <div class="hdr"> 
      <span><input type="radio" name="r2" value="A" checked="checked" /></span> 
      <span>Choose A</span> 
      <span><input type="radio" name="r2" value="B" /></span> 
      <span>Choose B</span> 
     </div> 
     <div> 
      This is the body for 2. 
     </div> 
     </div> 
    </form> 
    </body> 
</html>

EDIT: La suggestion de David Thomas a fonctionné. Voici l'exemple révisé, fixe:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" /> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script> 
    <title>Test</title> 
    <script type="text/javascript"> 
     $(document).ready(
     function() 
     { 
      $('#mystuff').accordion(
      { 
       header: "div.hdr", 
       collapsible: true, 
       heightStyle: "content" 
      }); 
      $('input[type=radio],label').on('click',function(e){e.stopPropagation();}); 
     } 
    ); 
    </script> 
    </head> 
    <body> 
    <form> 
     <div id="mystuff"> 
     <div class="hdr"> 
      <span><input id="r1a" type="radio" name="r1" value="A" checked="checked" /></span><label for="r1a">Choose A</label> 
      <span><input id="r1b" type="radio" name="r1" value="B" /></span><label for="r1b">Choose B</label> 
     </div> 
     <div> 
      This is the body for 1. 
     </div> 
     <div class="hdr"> 
      <span><input id="r2a" type="radio" name="r2" value="A" checked="checked" /></span><label for="r2a">Choose A</label> 
      <span><input id="r2b" type="radio" name="r2" value="B" /></span><label for="r2b">Choose B</label> 
     </div> 
     <div> 
      This is the body for 2. 
     </div> 
     </div> 
    </form> 
    </body> 
</html>

Source

2013-03-30 billdsd

J'ai oublié de mentionner: dans le code que j'ai essayé à l'origine de faire cela, j'avais un gestionnaire d'événement onclick pour les entrées. J'ai mis un point d'arrêt dans cette poignée dans Firebug et quand il s'est arrêté, l'autre radio a été cliquée et est resté ainsi dans mon gestionnaire d'événements. Je suis sorti de là et quelque chose dans jquery.js l'a relancé mais je ne pouvais pas comprendre ce que c'était. Je pense que Firebug est confus dans les manipulateurs d'événements de jquery. Je sais que je le fais. – billdsd

Si vous avez oublié quelque chose modifier votre message et l'ajouter, vous pouvez voir l'option d'édition au bas de votre message –

est ici une option:

$('div.hdr span').click(function(e){ 
    // stops the click event bubbling/propagating beyond the span 
    e.stopPropagation(); 
    // finds the previous span, 
    // finds the radio input in that span (if there is one) 
    // and checks it (though you should use the label element for this, really 
    $(this).prev('span').find('input:radio').prop('checked', true); 
});

JS Fiddle demo.

Source

2013-03-30 00:23:34

Cela a fonctionné! J'ai ajouté une version de travail de mon exemple de code original à la publication initiale, afin que les personnes lisant cette question plus tard puissent plus facilement voir comment cela peut fonctionner. J'aurais voté pour votre réponse, mais apparemment, je n'ai pas encore le droit de le faire. – billdsd

Comment faire pour que les boutons radio fonctionnent dans un accordéon JQuery UI?

Répondre

Questions connexes