Jquery复选框.prop单击preventDefault行为

Question

我最近一直在处理许多复选框.我在.prevenDefault()点击事件中遇到了这个"问题",我试图为此找到解决方案.在我的情况下,我希望能够决定是否可以根据其他字段选中/取消选中复选框.有时我甚至不得不在事件发生之前打开一个对话框.这比听起来更容易听起来......

在这个jsFiddle中,您可以看到问题是什么以及我是如何尝试解决它的(请参阅下面的代码).大多数答案暗示使用更改而不是单击.但是你不能使用.preventdefault().

$('div').off('change','.wtf').on('change', '.wtf', function(e) {
    //e.preventDefault();
    //return false;
    if($(this).prop('checked') == true) {
        alert('I am true now, but I must stay false');
        $(this).prop('checked', false);
    }
    else {
        alert('I am false now, but I must stay true');
        $(this).prop('checked', true);
    }
});

这是最好的解决方案吗？或者有没有其他方法使复选框等待,直到它被允许改变它的状态？

例如:我希望仅当用户通过点击"确定"同意对话框中的消息时,才会取消选中该复选框.

Answer 1

复选框是一个特殊情况,其中change事件click可以替换彼此,因为change event也通过单击复选框触发.

那说click和之间唯一的区别change就是可用性.preventDefault().如果使用除单击之外的任何其他方法更改复选框的值,则更改事件会更好.

在这种情况下,您可以选择您喜欢的任何一种.一个例子是:在这里小提琴

$('input[type="checkbox"]').on('change', function () {
    var ch = $(this), c;
    if (ch.is(':checked')) {
        ch.prop('checked', false);
        c = confirm('Do you?');
        if (c) {
            ch.prop('checked', true);
        }
    } else {
        ch.prop('checked', true);
        c = confirm('Are you sure?');
        if (c) {
            ch.prop('checked', false);
        }
    }
});