Предотвратить флажок от тикания/проверки ПОЛНОСТЬЮ

Мне было предложено отключить "тиканье" флажка. Я не прошу отключить этот флажок, но просто отключить "тиканье".

Другими словами, пользователь будет считать, что флажок доступен, но это не так. Вместо этого, нажав на этот флажок, появится модальный диалог, предоставляющий пользователю дополнительные параметры для включения или выключения функции, которую представляет флажок. Если параметры, выбранные в диалоговом окне, вызывают включение функции, установите флажок.

Теперь реальная проблема заключается в том, что в течение секунды секунды вы все еще можете видеть, что флажок отмечен.

Я пробовал такой подход:

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

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

Если вы запустите это, появится предупреждение, показывающее, что галочка видна (предупреждение есть только для того, чтобы продемонстрировать, что он по-прежнему галочки, на производстве, предупреждения там нет). У некоторых пользователей с более медленными машинами и/или в браузерах с медленными рендерами /javascript пользователи могут видеть очень слабое мерцание (мерцание иногда длится полсекунды, что заметно).

Тестер в моей команде отметил это как дефект, и я должен его исправить. Я не уверен, что еще я могу попытаться предотвратить мерцание флажка!

Ответы

Ответ 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();
});

Ответ 3

Этот эффект нельзя подавить, я боюсь. Как только вы нажмете на флажок, состояние (и рендеринг) будет изменено. Затем будут вызываться обработчики событий. Если вы выполните event.preventDefault(), то флажок будет reset после выполнения всех обработчиков. Если у вашего обработчика есть длительное время выполнения (легко проверяемое с помощью модального alert()) и/или рендеринг механизма рендеринга перед ресететом, поле будет мерцать.

$('input[type="checkbox"]').click(function(event) {
    this.checked = false; // reset first
    event.preventDefault();
    // event.stopPropagation() like in Zoltan 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);

Ответ 4

С моей точки зрения это так же просто, как:

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

Работает как для отмеченных, так и для непроверенных ящиков

Ответ 5

Разве не проще? :

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

Ответ 6

С помощью CSS вы можете изменить изображение флажка. См. http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/, а также флажки CSS Styling.

Я бы отключил этот флажок, но заменил его изображением рабочего флажка. Таким образом, флажок не выглядит отключенным, но не будет доступен для кликов.

Ответ 7

Оберните флажок другим элементом, который каким-то образом блокирует события указателя (возможно, через CSS). Затем обработайте событие щелчка обертки вместо флажка непосредственно. Это можно сделать несколькими способами, но здесь существует относительно простая реализация примера:

$('input[type="checkbox"').parent('.disabled').click( function() {
    
    // Add in whatever functionality you need here
    
    alert('Break');
    
});
/* Insert an invisible element that covers the checkbox */
.disabled {
    position: relative;
}
.disabled::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Only wrapped checkboxes are "disabled" -->
<input type="checkbox" />
<span class="disabled"><input type="checkbox" /></span>
<input type="checkbox" />
<span class="disabled"><input type="checkbox" /></span>
<span class="disabled"><input type="checkbox" /></span>
<input type="checkbox" />

Ответ 8

Звучит так, будто вы используете неправильный элемент интерфейса, более подходящей будет кнопка, которая по умолчанию отключена, но включена, когда эта опция доступна. Отображаемое изображение может быть любым, что вы хотите.

<button disabled onclick="doSomething();">Some option</button>

Когда пользователи выбрали эту функцию, включите эту кнопку. Изображение на кнопке может быть изменено с помощью CSS в зависимости от того, включена ли она или нет, или с помощью функции включения/выключения.

например.

<script type="text/javascript">

function setOption(el) {
  var idMap = {option1:'b0', option2: 'b1'};
  document.getElementById(idMap[el.value]).disabled = !el.checked; 
}

</script>

<div><p>Select options</p>
  <input type="checkbox" onclick="setOption(this);" value="option1"> Option 1
  <br>
  <input type="checkbox" onclick="setOption(this);" value="option2"> Option 2
  <br>
</div>
<div>
  <button id="b0" onclick="alert('Select…');" disabled>Option 1 settings</button>
  <button id="b1" onclick="alert('Select…');" disabled>Option 2 settings</button>
</div>

Ответ 9

Очень важно использовать return false в конце.

Что-то вроде этого:

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

Ответ 10

Метод Event.preventDefault должен работать для событий change, keydown и mousedown, но не в моем тестировании.

Мое решение этой проблемы в расширении Mozilla Firefox 53.0 состояло в том, чтобы переключить класс HTML, который включил/отключил объявление CSS pointer-events: none, применяемое к этому флажку. Это относится к случаю с курсором, но не к ключевому случаю. См. https://www.w3.org/TR/SVG2/interact.html#PointerEventsProp.

Я обратился к ключевому случаю, добавив/удалив атрибут HTML tabindex="-1". См. https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex.

Обратите внимание, что отключение pointer-events отключит вашу способность запускать курсоры CSS при наведении (например, cursor: not-allowed). Мой флажок уже был заключен в элемент span, поэтому я добавил класс HTML к этому элементу span, который затем перенацелил объявление CSS cursor на.

Также обратите внимание, что добавление атрибута tabindex="-1" не приведет к удалению фокуса из флажка, поэтому нужно явно дефокусировать его с помощью метода HTMLElement.blur() или путем фокусировки другого элемента для предотвращения ввода на основе клавиш, если этот флажок установлен активный элемент во время добавления атрибута. Независимо от того, является ли флажок сфокусированным элементом, можно проверить с помощью my_checkbox.isEqualNode(document.activeElement).

Ответ 11

Просто верните значение обратно

$('input[type="checkbox"]').on('change', function(e) {
    if (new Date().getDate() === 13) {
        $(this).prop('checked', !$(this).prop('checked'));
        e.preventDefault();
        return false;
     }
     // some code here
});

Ответ 12

Добавьте это, чтобы щелкнуть по событию в js файле

event.stopPropagation();