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

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

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

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

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

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

Надеюсь на эту помощь.

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

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

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

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

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