为什么复选框的状态不会改变？答案

【问题标题】：Why checkbox's state does not change?为什么复选框的状态不会改变？
【发布时间】：2016-02-02 01:13:06
【问题描述】：

单击复选框将向服务器发送一个ajax请求，这是我处理切换的方式：

toggleDefault: function(e) {
            e.preventDefault();
            var url = $(e.target).data('target');
            var value = $(e.target).attr('checked') ? 0 : 1;
            $.post(url, {value: value})
                .done(function() {
                    value ? $(e.target).attr('checked', true) : $(e.target).removeAttr('checked');
                })
                .error(function() {
                    alert('There is an error processing request, please try again.');
                })
        }

禁用事件确实可以正常工作。但是当涉及到启用事件时，我可以看到 $(e.target).attr('checked', true) 操作更改了复选框 dom。但 UI 上的复选框仍未单击。

如何解决这个问题？

【问题讨论】：

标签： javascript jquery ajax dom checkbox

【解决方案1】：

.done(function() {
   value ? $(e.target).prop('checked', true) : $(e.target).prop('checked', false);
})

还将这一行 var value = $(e.target).attr('checked') ? 0 : 1; 更改为 var value = $(e.target).is(':checked') ? 0 : 1;。

希望这会奏效！

【讨论】：

var value = $(e.target).is(':checked') ? 0 : 1; 无法获得正确的状态。
当它被选中时你想要 0 而当没有被选中时你想要 1 对吗？对吗？
是的。但未选中时我得到 0。
OK 然后切换值：var value = $(e.target).is(':checked') ? 1 : 0; 这是工作中的fiddle。
哇。所以这是棘手的部分！ @MarvinHeilemann 和 Deepak 非常感谢你们两个。

【解决方案2】：

我稍微编辑了您的代码。问题是您使用的是e.eventpreventDefault();，所以您的:checked-toggle 无法工作。每次调用您的事件时，浏览器都会将其设置为默认值。

$("#ckb").click(function (e) {
//toggleDefault: function(e) {
  // e.preventDefault();
  var url = $(e.target).data('target');
  var value = $(e.target).prop('checked') ? 0 : 1;
  $.post(url, {value: value})
    .done(function() {
      if(value===0) {
        $(e.target).prop('checked', true);
      } else {
        $(e.target).prop('checked', false);
      }
    })
    .error(function() {
      alert('There is an error processing request, please try again.');
    })
//}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input type="checkbox" name="default" id="ckb">Set as default
</body>
</html>

【讨论】：

谢谢。你能参考一下我可以弄清楚preventDefault 是如何阻止我读取当前状态的吗？

【解决方案3】：

你不应该改变属性，它不会起作用。而是更改prop property（检查“属性与属性”部分）：

value ? $(e.target).prop('checked', true) : $(e.target).prop('checked', false);

或者如果简化的话，那就是：

.done(function() {
    $(e.target).prop('checked', Boolean(value));
})

【讨论】：

谢谢，但我以前试过这个。问题是：第一次还可以。但是当我第二次点击复选框而不刷新页面时，$(e.target).attr('checked')得到的值会出错。
也可以使用prop 属性读取：$(e.target).prop('checked')。当您更改/读取选中的属性时，它只会影响复选框的默认（因此是初始）状态，而不是当前状态。
我又试了下你的方法，发现checkbox的dom这样没变。那么你知道改变复选框当前状态的方法吗？还是我必须刷新页面？