javascript - 单击时禁止更改复选框

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

添加到您的 onclick "return false;" 它不应该改变。

Answer 5

你可以开始你的 onchange 方法checkbox.checked=NOT checkbox.checked（你可能必须根据你选择的语言修改它），你可能会得到一个闪烁，但它应该足够快地把它放回去。

Answer 6

我认为您确实应该使用其他方法。也许是一个按钮/图像按钮，因为您想为单击触发一些动作以表示来自用户的特定命令（愿望）。我会尝试更好地解释：我认为您在页面中有一些信息和一些用户可以单击并执行某些操作的小工具（将项目添加到购物车），我认为如果小工具具有更多的视觉吸引力，它会更有用用户比一个复选框（例如“添加它”）。

希望这有帮助。