2009-09-02 4 views
2

이 확인란을 사용하여 행의 radiobuttons보기를 checkbox가 제어하는 ​​양식을 작성 중입니다. 한 번만 작동하는 문제.반응 확인란은 한 번만 작동합니다. 뭐가 잘못 되었 니?

잘못 될 수 있음을 알려주십시오.

<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> 

답변

2

당신은 당신의 체크 박스에 대해 하나의 클릭 핸들러를 필요로하고, 그 핸들러 내 당신은 클릭 확인란이 선택 또는 선택 해제되어 있는지 여부를 테스트하고 그에 따라 행동 할 수

페이지의 코드는 다음입니다. 이 문제 (시험) 해결해야

.parents('tr').find(':radio') 
이 함께

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

: 또한

$(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); 
    }) 
}); 

을,이 대체하여 그것을 조금 단축했습니다