Вопрос по javascript, checkbox – Запретить чекбокс / галочку / проверять ПОЛНОСТЬЮ

31

Меня попросили отключить «тиканье» флажка. Меня не просятdisable флажок, но для того, чтобы просто отключить «галочка».

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

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

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

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

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

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

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

Ваш Ответ

9   ответов
14

$('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();
});
Это не будет первый раз, когда функция setTimeout () будет использована для достижения этой функциональности!
Похоже на такой взлом, но работает так хорошо. Очень противоречивый.
У меня работает, мне пришлось справитьсяonclick событие и отправить запрос AJAX, таким образом, только изменитьchecked состояние при успешном обратном вызове ajax.
1

return false в конце.

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

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

Пытаться

event.stopPropagation();

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

К сожалению, это не останавливает галочку. Используя мой пример кода выше, вы увидите, что когда появляется предупреждение, флажок все еще отмечен. По крайней мере, это в Chrome. Andrew
На самом деле, это & quot; return false & quot; что предотвращает срабатывание модального диалогового обработчика, а не stopPropagation (). Я попробовал эту версию вашего кода, и флажок все еще отмечен:jsfiddle.net/737hX/1 Andrew
На самом деле, ISWYDT, "вернуть ложь" до оповещения. К сожалению, я не могу использовать этот подход, так как мне нужно модальное диалоговое окно, чтобы всплывающее окно после установки флажка. Я думаю, что stopPropagation () предотвращает запуск обработчика, который делает это (когда флажок установлен). Andrew
1

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

<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>
Хорошая мысль. Тем не менее, я бы не сказал, что кнопка для открытия диалога должна быть отключена - она просто должна заменить флажок. Состояние должно быть обозначено маркировкой кнопки.
Использование инвалидов наиболее близко делает то, что хочет ОП. Это также позволяет избежать скрытия и отображения элементов разных размеров (флажок и кнопка), что приводит к сложностям компоновки. Я почти всегда поддерживаю простейшее решение, которое делает эту работу.
5

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

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

2

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

$('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" />

Примечание: Вы также можете добавить элементы обертки программно, если хотите.

7

этот эффект не может быть подавлен. Как только вы нажмете на флажок, состояние (и рендеринг) изменится. Затем будут вызваны обработчики событий. Если вы делаетеevent.preventDefault(), флажок будет сброшенafter все обработчики выполнены. Если ваш обработчик имеет длительное время выполнения (легко проверяется модальным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);
2

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

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

Использование инвалидов наиболее близко делает то, что хочет ОП. Это также позволяет избежать скрытия и отображения элементов разных размеров (флажок и кнопка), что приводит к сложностям компоновки. Я почти всегда поддерживаю простейшее решение, которое делает эту работу.
Хорошая мысль. Тем не менее, я бы не сказал, что кнопка для открытия диалога должна быть отключена - она просто должна заменить флажок. Состояние должно быть обозначено маркировкой кнопки.
0

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

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

Я решил проблему с ключами, добавив / удалив HTMLtabindex="-1" приписывать. Увидетьhttps://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex.

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

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

Похожие вопросы