阻止复选框勾选/检查完全

Question

我被要求禁用复选框的"滴答".我没有被要求禁用该复选框,而只是禁用"滴答".

换句话说,用户会认为复选框是可勾选的,但事实并非如此.相反,单击该复选框将显示模式对话框,为用户提供更多选项以打开或关闭复选框所代表的功能.如果在对话框中选择的选项导致打开该功能,则会勾选该复选框.

现在,真正的问题是,只需一瞬间,您仍然可以看到勾选了复选框.

我尝试过这样的方法:

<input type='checkbox' onclick='return false' onkeydown='return false' />

$('input[type="checkbox"]').click(function(event) {
    event.preventDefault();
    alert('Break');
});

如果你运行这个,会出现警报,显示勾号是可见的(警报只是为了证明它仍然被勾选,在生产中,警报不存在).在一些使用较慢机器的用户和/或使用慢速渲染器/ javascript的浏览器中,用户可以看到非常微弱的闪烁(闪烁有时持续半秒,这是显而易见的).

我的团队中的测试人员已将此标记为缺陷,我应该修复它.我不知道还有什么可以阻止复选框中的勾号闪烁!

Answer 1

尝试

event.stopPropagation();

http://jsfiddle.net/DrKfE/3/

Answer 2

我想出的最佳解决方案:

$('input[type="checkbox"]').click(function(event) {
    var $checkbox = $(this);

    // Ensures this code runs AFTER the browser handles click however it wants.
    setTimeout(function() {
      $checkbox.removeAttr('checked');
    }, 0);

    event.preventDefault();
    event.stopPropagation();
});

Answer 3

我担心这种影响无法抑制.单击复选框后,状态(和渲染)将立即更改.然后将调用事件处理程序.如果你做了event.preventDefault(),该复选框将被复位后所有的处理程序执行.如果您的处理程序具有较长的执行时间(可以使用模态轻松测试alert())和/或渲染引擎在重新设置之前重新绘制,则该框将闪烁.

$('input[type="checkbox"]').click(function(event) {
    this.checked = false; // reset first
    event.preventDefault();
    // event.stopPropagation() like in Zoltan's answer would also spare some
    // handler execution time, but is no more needed here

    // then do the heavy processing:
    alert('Break');
});

该解决方案将闪烁降至最低,但不能真正阻碍它.有关如何模拟复选框的信息,请参阅Thr4wn和RobG的答案.我更喜欢以下内容:

<button id="settings" title="open extended settings">
    <img src="default_checkbox.png" />
</button>

document.getElementById("settings").addEventListener("click", function(e) {
    var img = this.getElementsByTagName("img")[0]);
    openExtendedSettingsDialog(function callbackTick() {
        img.src = "checked_checkbox.png";
    }, function callbackUntick() {
        img.src = "unchecked_checkbox.png";
    });
}, false);

Answer 4

从我的观点来看,它很简单:

$(this).prop('checked', !$(this).prop('checked'));

适用于已选中和未选中的框

Answer 5

return false最后使用非常重要。

像这样的东西：

$("#checkbox").click((e) => {
  e.stopPropagation();
  return false;
});

Answer 6

TL：博士；

HTML api 在 JavaScript 之前执行。因此，您必须使用 JavaScript 来撤消 HTML 的更改。

event.target.checked = false

问题是什么？

严格来说：我们无法“阻止”复选框被选中。为什么不？因为“被勾选”恰好意味着 DOM 的 HTML<input>元素具有checked属性值trueor false，该属性值立即由HTML api分配

console.log(event.target.checked) // will be opposite of the previous value

因此值得明确提及的是，此 HTML api 在脚本之前调用。<script>这是直观的并且应该有意义，因为所有 JavaScript 文件本身都是元素 attribute 的分配src，并且 DOM 树中您<input>所讨论的元素与<script>运行 JavaScript 的元素之间的祖先关系是非常重要的考虑因素。

如何获得我们的解决方案

在我们有机会拦截控制流（通过 JS 文件，如 jQuery）之前，HTML 分配的值尚未绘制，因此我们只需将属性重新分配checked给我们想要的布尔值：（false在您的情况下）。

因此总而言之，我们实际上可以“阻止”复选框被选中，只需确保该checked属性位于false下一个渲染中，因此不会看到任何更改。

Answer 7

不是更简单吗？：

<input type="checkbox" onchange="this.checked = !this.checked">