Запретить изменение флажка при нажатии на него

Question

Я хочу установить флажок на веб-странице. Когда я нажимаю на него, он отправляет запрос ajax на сервер. Когда сервер отвечает, я хочу, чтобы флажок изменился. Я могу исправить все, кроме того факта, что флажок сразу меняет состояние при нажатии.

Answer 1

Вы уверены, что действительно этого хотите? Запрос Ajax может занять некоторое время. Когда пользователь не получает обратной связи, он может быть склонен нажимать снова и снова, пока что-то не произойдет. Когда это деактивирует кнопку (снова через некоторое время), пользователь становится еще более озадаченным.

Скорее подумайте о предоставлении немедленной обратной связи (например, установите флажок) и отобразите рядом с ним индикатор, который сигнализирует о связи с сервером (например, знаменитое вращающееся колесо). Когда результат вернется, скройте индикатор и при необходимости снимите флажок. Вы также можете запретить размещение формы во время запроса ajax.

Answer 2

Вы, вероятно, могли бы сделать что-то вроде этого: когда флажок установлен, установите флажок «отключен» (это отключает флажок и сделает его недоступным для редактирования), сделайте вызов ajax, и как только вы получите возврат ajax, удалите «отключен» из флажка. Примерно так (с использованием jQuery, не проверено):

$('#mycheckbox').click( function() {
  var checkbox = this;
  $(checkbox).attr('disabled','1');
  $.post( url, data, function() {
    // if successful
    $(checkbox).removeAttr('disabled');
  }
}

Answer 3

<input id="theChkbox" type="checkbox" onclick="this.checked=!this.checked;sendAjaxRequest(this);">

this.checked=!this.checked сбросит состояние флажка до того, каким оно было до нажатия. Это должно работать во всех браузерах без мерцания состояния (слишком много).

sendAjaxRequest() сделает все возможное, и когда запрос вернется, установите соответствующий флажок. Передача this в sendAjaxRequest() должна дать вам ссылку на флажок, чтобы вы могли настроить его состояние. В противном случае просто используйте document.getElementById("theChkbox"), чтобы получить ссылку на него, чтобы установить его состояние.

Answer 4

Добавьте в свой клик "return false;" и это не должно измениться.

Answer 5

Я думаю, что вы действительно должны использовать другой подход. Может быть, кнопка / кнопка изображения, потому что вы хотите запустить некоторые действия для щелчка, чтобы представить конкретную команду (желание) от пользователя. Я попытаюсь объяснить лучше: я думаю, что у вас есть некоторая информация на странице и некоторые гаджеты, где пользователь может щелкнуть и что-то сделать (добавить товар в корзину), и я думаю, что это более удобно, если гаджет имеет больше визуального обращения пользователь, чем флажок (например, «добавить его»).

Надеюсь, что это поможет.

Answer 6

Вы можете начать свой метод onchange с checkbox.checked=NOT checkbox.checked (возможно, вам придется изменить его для вашего языка по вашему выбору), вы, вероятно, получите мерцание, но оно должно вернуть его достаточно быстро.