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>

我第二次将$('#checkable')拖到$('#draggable')时，是否有$('#droppable')未被检查的原因？

编辑1

根据Alex的要求，

jsFiddle。：）

Answer 1

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

.prop('checked',true)

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

正如文档中所述：

然而，最重要的概念要记住检查   属性是它与checked属性不对应。该   attribute实际上对应于defaultChecked属性和   应该只用于设置复选框的初始值。该   checked属性值不随状态而变化   复选框，而checked属性。因此，   跨浏览器兼容的方式来确定是否选中了复选框   使用该属性：

if（elem.checked）
  if（$（elem）.prop（＆＃34; checked＆＃34;））
  if（$（elem）.is（＆＃34 ;: checked＆＃34;））

拖放只更改元素一次

原始问题

编辑1

1 个答案: