Jquery 애니메이션 중에 확인란을 사용/사용하지 않음

Question

검색 양식 안에 확인란을 사용하여 여러 위치를 선택하거나 선택 취소 할 수 있습니다. 검색어를 개선하기 위해 일부 위치는 하위 위치로 나뉩니다.

이 JSFIDDLE LINK EXAMPLE에 영국 위치는 서로 다른 하위 위치로 구성됩니다.

과정 : 사용자가 영국 위치 (CF 링크)를 클릭 한

, JQuery와 이벤트가/숨기기 하위 위치를 표시하기 위해 개발되었습니다.

참고 : 주 위치와 그 하위 위치를 동기화 (선택/선택 취소)하기 위해 두 가지 다른 이벤트가 개발되었습니다.

문제 :

우리는 영국의 체크 박스와 그 하위 위치 DIV 컨테이너 사이의 동기화가 제대로 작동하지 않는 "영국"위치에 빠르게 여러 번 클릭합니다. 예 : 영국 위치는 하위 위치를 표시하지 않고 확인할 수 있습니다.

애니메이션 중에 체크 박스를 클릭하도록 사용자를 비활성화하는 방법이 있습니까?

HTML

</ul><ul id="locations"><li id="title"><b>Locations</b></li><div class="list-container">  
          <li> 
        <label class="location-checkbox "> 
         <input value="15" name="locations[]" type="checkbox" > SE Asia - 15      <span></span> 
        </label> 
       </li> 

          <li> 
        <label class="location-checkbox "> 
         <input value="8" name="locations[]" type="checkbox" > South America - 8      <span></span> 
        </label> 
       </li> 

           <li class="london-parent-country"> 
         <label class="location-checkbox"> 
          <input id="checkboxuk" value="9" name="locations[]" type="checkbox"> UK - 9       <span></span> 
         </label> 
        </li> 
        <div id="uk-child"> 
               <li> 
           <label class="location-checkbox child-location"> 
            <input class="uk" value="17" name="locations[]" type="checkbox" style="margin-left:50px;"> England - 17         <span></span> 
           </label> 
          </li> 
                 <li> 
           <label class="location-checkbox child-location"> 
            <input class="uk" value="20" name="locations[]" type="checkbox" style="margin-left:50px;"> Northern Ireland - 20         <span></span> 
           </label> 
          </li> 
                 <li> 
           <label class="location-checkbox child-location"> 
            <input class="uk" value="18" name="locations[]" type="checkbox" style="margin-left:50px;"> Scotland - 18         <span></span> 
           </label> 
          </li> 
                 <li> 
           <label class="location-checkbox child-location"> 
            <input class="uk" value="19" name="locations[]" type="checkbox" style="margin-left:50px;"> Wales - 19         <span></span> 
           </label> 
          </li> 
               </div> 

          <li> 
        <label class="location-checkbox "> 
         <input value="10" name="locations[]" type="checkbox" > Western Europe - 10      <span></span> 
        </label> 
       </li> 

      <br/> 
</div></ul><!-- list-container --> 

JQUERY

$('li.london-parent-country label').live('click', function (event) { 

       var ttt= $('#checkboxuk').prop("checked") 
       console.log("every-click: "+ttt); 

       if($('.london-parent-country').hasClass("animated")){ /* Wait the animation to be completed */ } 
       else { 

        // Disable checkboxes during animation - not working 
        // $('input[value=9]').prop("disabled", true); 

        // <input type="checkbox" disabled="disabled" checked="checked"> 

        // Add or remove the open class to know if we need to hide/show the div 
        $('#uk-child').toggleClass("open");    
        var current_class = $('#uk-child').attr('class'); 
        if (current_class=="open"){ 
         // We show sub-locations 

         // Add this class to cancelled this function onclick 
         $('.london-parent-country').addClass("animated"); 

         $("#uk-child").stop().show(1000, "easeOutQuart", function() { 

          // Remove class when the animation is done. 
          $('li.london-parent-country').removeClass("animated"); 

          $('input[value=9]').prop("disabled", false); 

         }); 
        } 
        else { 
         // We hide sub-locations 

         $('.london-parent-country').addClass("animated"); 
         $("#uk-child").stop().hide(1000, "easeOutQuart", function() { 
          // Remove the animated class + enable checkboxes 
          $('li.london-parent-country').removeClass("animated"); 
          $('input[value=9]').prop("disabled", false); 
         }); 
        }  
       }  
      }); 

Answer 1

는 희망이 옳은 방향으로 당신을 가리 킵니다 .. 저는 여기에 애니메이션 변수를 사용하여 해낸 하나 개의 솔루션입니다 .. 확인 애니메이션의 사용법을 알아보기 위해 코드의 나머지 부분을위한 바이올린.

if(animating) 
    return false; 

나는 또한 $('#checkboxuk').prop('checked', true);과 $('#checkboxuk').prop('checked', false);을 사용하여 전환이 완료되면 상자가 적절한 이미지를 보여 주는지 확인했습니다.

http://jsfiddle.net/4Dq9A/11/

Answer 2

JQUERY 작업 기능 :

// UK 
// CHECK/UNCHECKED ALL CHILD CHECKBOXES FROM THE PARENT AND DISABLE CLICK DURING ANIMATION 
var animating = false; 
jQuery('li.london-parent-country label').live('click', function (event) { 
    // Cancelled this event if animation isn't finished 
    if(animating) 
     return false; 

    animating = true; 
     jQuery('#uk-child').toggleClass("open");  
     var current_class = jQuery('#uk-child').attr('class'); 
     if (current_class=="open"){ 
      // Check the parent cat drop boxes 
      jQuery('#checkboxuk').prop('checked', true); 
      // Check all uk child cat   
      jQuery('.uk').prop('checked', true).change(); 

      // Display the uk sub cats container   
      jQuery("#uk-child").stop().show(1000, "easeOutQuart", function() { 
       jQuery('#checkboxuk').prop("disabled", false); 
       animating = false; 
      }); 
     } 
     else { 
      // We hide sub-locations 
      // Un-check the parent cat drop boxes 
      jQuery('#checkboxuk').prop('checked', false); 
      // Un-check all uk child cat         
      jQuery('.uk').prop('checked', false).change(); 
      jQuery("#uk-child").stop().hide(1000, "easeOutQuart", function() { 
       // Remove the animated class + enable checkboxes 
       jQuery('#checkboxuk').prop("disabled", false); 
       animating = false; 
      }); 
     }  
});  

// UK CHILD CAT 
// Check and uncheck the parent cat uk if all child are unchecked or checked 
jQuery('.uk').click(function() { 
    // we count the number of uk's children 
    var uk_child_number = jQuery('.uk').length; 
    // console.log(uk_child_number); 
    var count_uk = 0;   
    jQuery(".uk:checked").each(function(){count_uk++;}); 

    // we check the country 
    if(uk_child_number==count_uk){ 
     jQuery('input[value=9]').prop('checked', true).change(); 
    }else{ 
     jQuery('input[value=9]').prop('checked', false).change(); 
    } 
});