La réaction sur la case ne fonctionne qu'une seule fois. Qu'est-ce qui ne va pas?

Je fais le formulaire où la case à cocher contrôle la vue des boutons radio de la rangée avec cette case à cocher. Le problème que cela ne fonctionne qu'une seule fois.La réaction sur la case ne fonctionne qu'une seule fois. Qu'est-ce qui ne va pas?

Veuillez nous informer de la nature de cette erreur.

Le code de la page est le suivant:

<html> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function(){ 
     $("label input:checkbox:not(:checked)") 
      .parent().parent().parent() 
      .find(":radio") 
      .attr('checked',false) 
      .attr('disabled',true); 

     $("label input:checkbox:not(:checked)").click(function(){ 
      $(this).parent().parent().parent() 
      .find(":radio") 
      .attr('disabled',false); 
      return true; 
     }) 

     $("label input:checkbox:checked").click(function(){ 
      $(this).parent().parent().parent() 
      .find(":radio") 
      .attr('checked',false) 
      .attr('disabled',true); 
      return true; 
     }) 

     $("#clear-first").click(function(){ 
      $("input[name='first']").attr('checked',false); 
     }) 

     $("#clear-second").click(function(){ 
      $("input[name='second']").attr('checked',false); 
     }) 
    }); 

    </script> 

    </head> 
    <body> 
     <form> 
     <table id="filters-select"> 
     <thead> 
       <tr> 
        <td>filter name</td> 
        <td>first filter</td> 
        <td>second filter</td> 
       </tr> 
      </thead> 
     <tbody> 
     <tr> 
      <td><label><input type="checkbox" name="first-check" checked="checked" class="filter-checkbox">first row</label></td> 
      <td><label><input type="radio" name="first" value="1">value 1 col 1</label></td> 
      <td><label><input type="radio" name="second" value="1">value 1 col 2</label></td> 
     </tr><tr> 
      <td><label><input type="checkbox" name="second-check" class="filter-checkbox">second row</label></td> 
      <td><label><input type="radio" name="first" value="2">value 2 col 1</label></td> 
      <td><label><input type="radio" name="second" value="2">value 2 col 2</label></td> 
     </tr><tr> 
      <td><label><input type="checkbox" name="third-check" class="filter-checkbox">third row</label></td> 
      <td><label><input type="radio" name="first" value="3">value 3 col 1</label></td> 
      <td><label><input type="radio" name="second" value="3">value 3 col 2</label></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td><a id="clear-first">clear</a></td> 
      <td><a id="clear-second">clear</a></td> 
     </tr> 
     </tbody> 
     </table> 
     </form> 
    </body> 
</html>

Source

2009-09-02 Anonymous

Vous avez seulement besoin d'un gestionnaire de clic pour vos cases à cocher, et dans ce gestionnaire vous pouvez vérifier si la case cliqué a été enregistré ou non et agir en conséquence. Cela devrait résoudre votre problème (testé):

$(document).ready(function(){ 
    $("label input:checkbox:not(:checked)") 
     .parents('tr') 
     .find(':radio') 
     .attr('checked',false) 
     .attr('disabled',true); 

    $("label input:checkbox").click(function(){ 
     var $radio = $(this).parents('tr') 
          .find(':radio'); 
     if($(this).is(':checked')) { 
      $radio.removeAttr('disabled'); 
     } else { 
      $radio.attr('disabled',true); 
     } 
     return true; 
    }); 

    $("#clear-first").click(function(){ 
     $("input[name='first']").attr('checked',false); 
    }) 

    $("#clear-second").click(function(){ 
     $("input[name='second']").attr('checked',false); 
    }) 
});

Aussi, j'ai raccourci un peu en remplaçant ceci:

.parent().parent().parent() 
      .find(":radio")

avec ceci:

.parents('tr').find(':radio')

Source

2009-09-02 11:19:49 karim79

La réaction sur la case ne fonctionne qu'une seule fois. Qu'est-ce qui ne va pas?

Répondre

Questions connexes