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

复选框的点击会发送一个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)操作会更改复选框。但用户界面上的复选框仍未点击。

如何解决此问题？

来源

2015-11-02 JasmineOT

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

希望这会起作用！

来源

2015-11-02 08:05:35 deepakb

var value = $（e.target）.is（'：checked'）？ 0：1;'没有得到正确的状态。 – JasmineOT

当它被选中时，你想要0，当没有检查时，你想要1？那是对的吗？ – deepakb

是的。但是如果没有选中，我会得到0。 – JasmineOT

你不应该改变属性，它不会工作。相反，改变propproperty（选中 “属性与属性” 部分）：

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

或者，如果简化它仅仅是：

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

来源

2015-11-02 07:42:52 dfsq

谢谢，但我已经尝试过这一点。问题是：第一次是好的。但是当我第二次点击复选框而没有刷新页面时，通过'$（e.target）.attr（'checked'）'得到的值将是错误的。 – JasmineOT

另请阅读使用'prop'属性：'$（e.target）.prop（'checked'）'。当您更改/读取选中的**属性**时，它只会影响复选框的默认**（因此为初始）状态，而不会影响当前状态。 – ghybs

我再次尝试了您的方法，发现复选框的dom以这种方式不变。那么你知道如何改变复选框的当前状态吗？或者我必须刷新页面？ – JasmineOT

我修改了一下你的代码。问题是你正在使用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>

来源

2015-11-02 08:30:58 muuvmuuv

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

只需在jquery文档中查看即可。 http://api.jquery.com/event.preventdefault/ – muuvmuuv

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

回答

相关问题