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

#javascript #checkbox

Вопрос:

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

Ответ №1:

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

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

Ответ №2:

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

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

Ответ №3:

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

Комментарии:

1. В некоторых браузерах вы можете видеть, как он включается и выключается. И если вы выполняете какое-либо другое действие синхронно, прежде чем возвращаете false, флажок будет оставаться включенным до тех пор, пока ваш код не достигнет инструкции return.

Ответ №4:

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

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

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

Ответ №5:

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

Комментарии:

1. Я всегда думал, что это флажок.проверено=ложь, которую я никогда не видел = НЕ раньше. Ну, я думаю, что если «НЕТ» не определено, это может сработать.

2. Я использую vbscript, все, что делает, — это отменяет настройку checkbox.checked, в любом случае. Кстати, с vbscript ужасно работать.

Ответ №6:

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

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