在 Jquery 动画期间禁用/启用复选框

Question

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

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

过程：

当用户单击英国位置（cf 链接）时，已开发 Jquery 事件来隐藏/显示其子位置。

注意：已经开发了另外两个事件来同步（选中/取消选中）主位置及其子位置。

问题：

当我们多次快速单击“Uk”位置时，Uk 复选框与其子位置 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();
    }
});