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