爲什麼複選框的狀態不會改變？

複選框的點擊會發送一個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

爲什麼複選框的狀態不會改變？

回答

相關問題