Отключить проверку флажка (материальный свет)

В моем приложении я использую библиотеку 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

Ответ 1

Если вам просто интересно, как это сделать, пропустите до конца. Если вы хотите немного узнать о том, почему у вас все проблемы, читайте дальше!

Почему вы видите это

Стоит отметить, что причина, по которой вы видите это, заключается в том, что порядок событий здесь отличается от IE в других браузерах.

В принципе, в Chrome (и я предполагаю, что FF) графическое обновление для изменения флажка визуально "проверено" происходит после вызова функций onclick. В IE, однако, сначала выполняется графическое изменение, и THEN вызывают события onclick, поэтому ваши вызовы preventDefault() и stopPropogation() ничего не делают - лошадь уже закрепилась в этой точке. Вы можете это увидеть сами, добавив предупреждение в начале связанной функции до evt = evt || window.event: в Chrome это окно все еще не отмечено, в IE уже слишком поздно.

Что вы можете сделать?

Здесь, где это становится немного сложнее. Использование ng-disabled и его ilk - это только вариант, если вы счастливы, что действие не срабатывает, когда вы нажимаете флажок, который, как я думаю, не является тем, что вы хотите.

Результатом этого является то, что я не думаю, что вы можете сделать что-то, что можно сделать, чтобы остановить фактическое срабатывание кликов на элементе флажка, проверяя флажок в IE. Если вы хотите остановить флажок, но действие щелчка на флажке вызывает что-то, вам нужно либо:

Перехватить клик каким-либо способом, чтобы он никогда не ударял элемент.
Сделайте что-то, чтобы отменить действие нажатия.

Вариант 1 немного сложный и подвержен ошибкам. У меня был некоторый успех с SetCapture, но это было немного непоследовательно. К счастью, вариант 2 обеспечивает гораздо более простое решение.

Решение

Не перехватывайте клик, не останавливайте пропозицию, просто установите флажок самостоятельно, чтобы вторая "проверка" в событии клика снова отменила его. Конечным результатом является то, что ваше окно остается неконтролируемым пользователю, и вы можете отключить любую функциональность, которую вы хотите, с обратной стороны события click:

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

focusin вызывается так же, как элемент собирается получать фокус - например, щелкнув. Это не идеально, как если бы пользователь набрал флажок, чтобы проверить его, но я обнаружил, что использование события click не работает для меня. Может быть лучшее событие для использования, или вы можете узнать, как заставить событие click работать. В худшем случае вы всегда можете выйти из функции без эффекта, если нажата клавиша табуляции.

Я пробовал это в IE11 и Chrome, оба, похоже, работают так, как ожидалось.

Ответ 2

Если вы действительно хотите иметь абсолютный контроль над этим флажком, вопреки всем требованиям, вы можете даже не использовать реальный флажок. Я имею в виду использовать шрифт значка, например Font Awesome, чтобы поместить значок, подобный флажку. Вы контролируете, какой значок отображается с ng-классом, и управляйте логикой для ng-класса в функции ng-click (однако вы хотите определить ее). Вы сохраняете полный контроль над тем, какой значок отображается - пустой флажок или флажок checked или что-то еще.

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

Вы сохраняете полный контроль над тем, какой значок отображается - пустой флажок или флажок checked или что-то еще. Честно говоря, я думаю, что ответ Стэнли лучше для многих случаев и довольно гениальный, но если вы действительно хотите контролировать его, вот оно.