Question

单击复选框将向服务器发送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上的复选框仍然未被点击。

如何解决这个问题？

Answer 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;。

希望这会有效！

Answer 2

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

$("#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>

Answer 3

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

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

或者如果简化它将只是：

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

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

3 个答案: