禁用复选框（材质灯）检查答案

【问题标题】：Disable checkbox (material light) checking禁用复选框（材质灯）检查
【发布时间】：2016-07-04 20:01:18
【问题描述】：

在我的应用程序中，我正在使用 Google Material Light 库。

而且我不想检查我的输入（直到某些逻辑正确），这就是为什么我添加了这样的指令：

app.directive('updLink', function () {
    return {
      restrict: 'EA',
        link: function(scope, element) {
          element.bind('click', function(evt) {
            evt = evt || window.event;
            evt.preventDefault();
            evt.stopPropagation();
            evt.returnValue = false;
            return false;
          });
        }
      };
  });

还有我的html：

  <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="123">
      <input type="checkbox" id="123" class="mdl-checkbox__input"  ng-model="user" upd-link>
  </label>

为什么阻止这个指令在IE10+ 中不起作用？

复选框正在检查（

价值正在改变...

是否可以停止任何更改并检查此元素？

plunker：https://plnkr.co/edit/CCQaBOntmQ4eWh0RUJ5Q?p=preview

【问题讨论】：

我不认为 safari 支持 a[download]，但我想错了...
为什么不使用disabled？还是 ng 禁用？
@tudor.gergely 因为我在单击此复选框时使用模态警报（它不能被禁用）
所以你希望它是可点击的（这样你可以在点击时提醒一些东西）但你不希望它实际检查任何东西？
@tudor.gergely 是的

标签： javascript html angularjs angular-material

【解决方案1】：

如果您只是对如何执行此操作感兴趣，请跳到最后。如果您想知道为什么会遇到这些麻烦，请继续阅读！

为什么你会看到这个

值得注意的是，您看到这个的原因是这里的事件顺序在 IE 中与其他浏览器不同。

基本上，在 Chrome 中（我认为是 FF），在调用 onclick 函数之后会发生将复选框更改为视觉“选中”的图形更新。然而，在 IE 中，首先完成图形更改，然后 THEN 调用 onclick 事件，这就是为什么您的 preventDefault() 和 stopPropogation() 调用无济于事 - 那时马已经狂奔了.您可以通过在 evt = evt || window.event 之前的绑定函数的开头添加警报来亲自看到这一点：在 Chrome 中该框仍未选中，在 IE 中已经太晚了。

你能做什么？

这里有点复杂。如果您很高兴单击复选框时不会触发某个操作，那么使用 ng-disabled 及其同类只是一种选择，我认为这不是您想要的。

这样做的结果是，我认为您无法阻止在 IE 中选中复选框的复选框元素上触发实际的单击事件。如果您想停止选中该框，但单击复选框的操作导致某些事情发生，您将需要：

以某种方式拦截点击，使其永远不会真正击中元素。
做一些事情来取消点击行为。

选项 1 有点棘手并且容易出错。我在SetCapture 上取得了一些成功，但有点不一致。值得庆幸的是，选项 2 提供了一个更简单的解决方案。

解决方案

不要拦截点击，不要停止传播，只需自己选中该框，以便点击事件中的第二个“选中”再次取消选中它。最终结果是您的框仍未被用户选中，您可以在点击事件的后面触发您想要的任何功能：

element.bind('focusin', function() {
  this.checked=true;
});

focusin 在元素即将获得焦点时被调用 - 即被点击。这并不完美，就像用户在复选框上选中它会检查它一样，但我发现使用点击事件对我不起作用。可能有更好的事件可以使用，或者您可能知道让点击事件起作用的方法。最坏的情况是，如果我们当前按下了 tab 键，你总是可以让函数退出而无效。

我已经在 IE11 和 Chrome 中尝试过，似乎都可以正常工作。

【讨论】：

【解决方案2】：

如果您真的想完全控制该复选框，那么您可以考虑根本不使用真正的复选框。我的意思是使用像Font Awesome 这样的图标字体来放置一个类似复选框的图标。您可以控制使用 ng-class 显示哪个图标，并在 ng-click 函数中控制 ng-class 的逻辑（但是您想定义它）。您可以完全控制显示哪个图标 - 空复选框、选中的复选框或其他任何内容。

<span class="fa"
    ng-class="{ 'fa-square-o': !checkboxChecked,
                'fa-check-square-o': checkboxChecked }"
    ng-click="checkboxFunction()">
</span>

您可以完全控制显示哪个图标 - 空复选框、选中的复选框或其他任何图标。老实说，我认为我斯坦利的答案在很多情况下都更好，而且非常天才，但如果你真的想控制它，这里就是。

【讨论】：