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

原始问题

我有一个可拖动元素（为清楚起见，我们称之为$("#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>

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

编辑1

jsFiddle根据Alex的要求。 :)

最佳答案

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

.prop('checked',true)

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

如文档中所述：


  尽管如此，要记住有关检查的最重要概念
  属性是它与被检查的属性不对应。的
  属性实际上对应于defaultChecked属性，并且
  应该仅用于设置复选框的初始值。的
  选中的属性值不会随状态改变
  复选框，而选中属性则显示。因此，
  跨浏览器兼容的方法来确定是否选中了一个复选框
  使用属性：
  
  如果（elem.checked）
  如果（$（elem）.prop（“ checked”））
  如果（$（elem）.is（“：checked”））