阻止复选框道具“checked”更新

Prevent checkbox prop `checked` from updating

本文关键字：checked 更新 复选框      更新时间：2023-09-26

如何防止<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);

您似乎对preventDefault的作用抱有错误的期望。它只是设置一个标志，以便事件处理引擎知道在事件处理程序1被处理后该做什么。

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

这里解释了如何处理事件：

  • 对元素运行单击前激活步骤
  • 在元素上激发单击事件。[…]
  • 如果未取消此单击事件，请对元素运行单击后激活步骤
  • 如果事件被取消，则用户代理必须对元素运行已取消的激活步骤

这是点击复选框时发生的情况的说明：

如果元素是可变的，那么：点击前激活步骤包括将元素的checkness设置为其相反的值（即，如果为true，则为true，如果为false），以及将元素的不确定IDL属性设置为false。取消的激活步骤包括将checkness和元素的不确定IDL属性设置回运行点击前激活步骤之前的值。

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

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

当检查的属性的状态已更改为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);

干杯！

在HTML中只需在输入元素中添加"disabled"。

相关文章：