在jquery动画中禁用/启用复选框

Question

在搜索表单中，我允许用户使用复选框选择和取消选择多个位置。为了改善搜索查询，一些位置被子位置分开。

在此JSFIDDLE LINK EXAMPLE上，位置英国由不同的子位置组成。

过程：

当用户点击了英国位置（参见链接），一个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(); 
    } 
});