javascript - 仅拖/放更改元素检查一次

Question

原始问题

我有一个可拖动元素(为了清楚起见，我们将其称为 $("#draggable"))，它会触发复选框 ($('#checkable') )。当 $('#draggable') 被拖动到一个框 ($('#droppable')) 时，它会检查 $('#checkable')，当 $('#draggable') 被拖出 $('#droppable') 时，它会取消选中 $('#checkable' )。

第一次将 $("#draggable") 拖动到 $('#droppable') 时，它会检查 $('#checkable')完美。当我将 $("#draggable") 拖出 $('#droppable') 时，它会取消选中 $('#checkable')一切都很好。但是当我将 $("#draggable") 重新拖动到 $('#droppable') 时，它不会检查 $('#checkable').

这是我的 jQuery 代码:

$(document).ready(function(e) {
    $('.draggable').draggable({ revert: "invalid", opacity: 0.7, helper: "clone" });
    $('.droparea').droppable({
        accept: function(el) {
            if(el.hasClass($(this).data('accept'))) {
                return true;
            }
        },
        hoverClass: 'hover',
        drop: function(e,ui) {
            var $this = $(this);
            if(app.is_empty($this.data('count')) || parseInt($this.data('count')) == 0) {
                ui.draggable.appendTo($this);
                $('#' + ui.draggable.data('rel')).attr('checked','checked');
                console.log('#' + ui.draggable.data('rel'),$('#' + ui.draggable.data('rel')).is(':checked'));
            } else {
                var holder = $('.' + $this.data('accept') + 's');
                var child = $this.children('.' + $this.data('accept'));
                $('#' + child.data('rel')).attr('checked',null);
                child.appendTo(holder);
                ui.draggable.appendTo($this);
                $('#' + ui.draggable.data('rel')).attr('checked','checked');
            }
        }
    });
    $('.holder').droppable({
        accept: function(el) {
            if(el.hasClass($(this).data('accept'))) {
                return true;
            }
        },
        drop: function(e,ui) {
            var $this = $(this);
            ui.draggable.appendTo($this);
            $('#' + ui.draggable.data('rel')).attr('checked',null);
            console.log('#' + ui.draggable.data('rel'),$('#' + ui.draggable.data('rel')).is(':checked'));
        }
    });
});

这是我的 HTML:

<div class="drop-holder">
    <div class="droparea addressbooks-drop ui-droppable" data-accept="addressbook">
        <div class="text-placeholder">
            Addressbooks
        </div>
    </div>
    <div class="holder addressbooks ui-droppable" data-accept="addressbook">
        <div class="draggable addressbook btn btn-primary ui-draggable ui-draggable-handle" data-rel="4685f5c2-473f-11e5-ad20-000c29b8330c">
            Another Book (2124)
        </div>
        <div class="checkbox-holder">
            Another Book (2124)
            <input type="checkbox" value="4685f5c2-473f-11e5-ad20-000c29b8330c" id="4685f5c2-473f-11e5-ad20-000c29b8330c">
        </div>
        <div class="draggable addressbook btn btn-primary ui-draggable ui-draggable-handle" data-rel="04b506c5-4646-11e5-ad20-000c29b8330c">
            default (4)
        </div>
        <div class="checkbox-holder">
            default (4)
            <input type="checkbox" value="04b506c5-4646-11e5-ad20-000c29b8330c" id="04b506c5-4646-11e5-ad20-000c29b8330c"></div>
    </div>
</div>

我第二次将 $('#draggable') 拖动到 $( 时未检查 $('#checkable') 的任何原因'#droppable')？

编辑1

jsFiddle按照亚历克斯的要求。 :)

Answer 1

我用 .prop() 切换了 .attr() ，并用 false 替换了 null ， and it seems to work 。

.prop('checked',true)

看看 prop 并了解何时使用 .prop() 比使用 .attr() 更好。

正如文档中所说:

Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:

if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )