拖放仅更改元素检查一次

Question

原始问题

我有一个触发复选框 ($('#checkable')) 的可拖动元素（为了清楚起见，我们称之为$("#draggable")）。当$('#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') 拖到$('#droppable') 时没有检查$('#checkable') 的任何原因？

编辑 1

jsFiddle 按照 Alex 的要求。 :)

Answer 1

我将.attr() 替换为.prop()，并将null 替换为false、and it seems to work。

.prop('checked',true)

查看prop 并阅读何时使用.prop() 比使用.attr() 更好。

正如文档中所说：

尽管如此，关于检查的最重要的概念是要记住 属性是它不对应于选中的属性。这 属性实际上对应于 defaultChecked 属性和 应该只用于设置复选框的初始值。这 选中的属性值不随状态改变 复选框，而选中的属性确实如此。因此， 确定是否选中复选框的跨浏览器兼容方法是 使用属性：

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