Question

在我的应用中，我正在使用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

Answer 1

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

为什么你会看到这个

值得注意的是，您之所以看到这一点，是因为IE中的事件顺序与其他浏览器不同。

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

你能做什么？

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

这样做的结果是，我不认为你可以采取任何措施来阻止在IE中选中复选框元素的实际点击事件。如果您想要停止正在检查的复选框，但点击复选框的操作会导致某些事情发生，您将需要：

以某种方式拦截点击，以便它实际上不会击中该元素。
做点什么来取消点击行为。

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

解决方案

不要拦截点击，不要停止传播，只需自己检查一下盒子，以便第二个＆＃34;检查＆＃34;在click事件中再次取消选中它。最终结果是您的框仍然未经检查给用户，您可以在点击事件的后面触发您想要的任何功能：

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

focusin被称为元素即将获得焦点 - 即被点击。它并不完美，好像用户选中了它会检查它的复选框，但我发现使用点击事件并不适合我。可能有更好的事件要使用，或者您可能知道使点击事件起作用的方法。最糟糕的情况是，如果当前按下了Tab键，则总是可以使函数退出无效。

我已经在IE11和Chrome中尝试了这一点，两者似乎都按预期工作。

Answer 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>

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

禁用复选框（素材灯）检查

2 个答案:

为什么你会看到这个

你能做什么？

解决方案