Question

如何防止<input type="checkbox">元素的.checked属性发生变化？

jsFiddle
我希望此代码在单击复选框时提醒false，但会提醒true。

var $elem = $('input');

function handleToggle(event) {
    event.preventDefault();
    event.stopPropagation();

    alert(event.target.checked);
}

$elem.bind('change click', handleToggle);

Answer 1

您似乎对preventDefault所做的事情抱有错误的期望。它只是sets a flag，以便事件处理引擎知道在处理¹事件之后做什么。

如果cancelable属性值为true，则preventDefault（）方法必须设置cancel标志。

事件的处理方式是explained here：



在元素上运行预先单击激活步骤。

在元素上触发点击事件。 [...]

如果未取消此点击事件，请在元素上运行点击后激活步骤。

如果事件被取消，则用户代理必须在元素上运行已取消的激活步骤。


This is the specification of what happens when a checkbox is clicked：


如果元素是可变的，则：pre-click activation steps包括将元素的checkedness设置为其相反的值（如果为假则为true，如果为真，则为true），以及设置element的不确定IDL属性为false。 canceled activation steps包括将checkedness和元素的不确定IDL属性设置回运行预单击激活步骤之前的值。

所以你看，元素的checked属性在执行事件处理程序之前设置为相反的值，并且只有在事件被取消时才设置为原始值。但该过程是在事件处理程序之后运行的。

¹：它似乎不是在当前事件处理程序本身之后，而是所有应该执行的事件处理程序。

Answer 2

当选中的属性的状态已更改为true时，将调用该事件。如果要始终将复选框标记为false，则必须输入条件。虽然我没有看到这样做的感觉。

var $checkbox = $('input[type="checkbox"]');

function handleToggle(event) {
    event.preventDefault();
    event.stopPropagation();
    if(event.target.checked === true) {
        event.target.checked = false;
    }
    alert(event.target.checked);
}

$checkbox.bind('change click', handleToggle);

干杯！

Answer 3

HTML中的

只是添加了“禁用”功能。到输入元素。

防止复选框prop` checked`更新

3 个答案: