的jQuery/JavaScript的：在一個複選框和「檢查」屬性

點擊事件中的代碼：的jQuery/JavaScript的：在一個複選框和「檢查」屬性

$('input.media-checkbox').live('click', function(e){ 

    e.preventDefault(); 
    var that = $(this); 

    if (that.attr('checked') == 'checked'){ 

     var m = that.attr('media'); 
     var mid = 'verify_' + m; 
     that.parents('div.state-container').find('ul.' + mid).remove(); 
     that.attr('checked', false); 
    } else { 

     var url = AJAX_URL; 

     $.ajax({ 
      type: 'GET', 
      url: url, 
      dataType: 'html', 
      success: function(data){ 

       that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500); 
       that.attr('checked', 'checked'); 
      } 
     }); 
    } 

    return false; 
});

我ajaxing的形式，然後在相應的複選框中點擊事件觸發阿賈克斯在另一部分如果有必要。該表單插入得很好，點擊事件被觸發，檢查需要檢查的框並觸發第二個Ajax，因爲複選框的checked屬性最初爲false。

什麼凝乳我的奶酪是如果我不檢查其中一個盒子。儘管e.preventDefault()，checked屬性在測試之前設置爲false，因此if語句始終執行else語句。我也試過$.is(':checked')，所以我完全感到困惑。

看來，未選中 - >檢查狀態讀取原始狀態，但選中 - >未選中不檢查。任何幫助？

來源

2010-05-07 b. e. hollenbeck

你試過'返回false;'而不是'e.preventDefault'嗎？另外，您是否使用過函數（e）{e = e ||事件; ''？ – 2010-05-07 04:37:48

'return false'，是的 - 它在代碼的末尾。它應該在'if'關閉中嗎？我對代碼的第二部分不熟悉......它有什麼用途？ – 2010-05-07 04:42:28

第二位是檢查'e'是否爲非空值，如果不是則賦值給全局'事件'變量。 – 2010-05-07 04:44:38

BE，我知道它已經一年了，但我想我找到了解決辦法，

這裏的問題是，單擊事件實際上得到的調用，運行前的「檢查」屬性被添加到複選框輸入。所以函數運行，查看輸入是否具有「checked」屬性，並運行else條件。那麼該元素被賦予「checked」屬性。

我剛剛遇到了這個問題，我的解決方案是將函數綁定到更改函數而不是click函數，因爲更改僅在輸入上更新了checked屬性後觸發。

希望這可以幫助你，如果沒有的話，碰巧碰到這個帖子的同時遇到類似問題的任何人。

來源

2012-04-16 17:49:16

對原始項目進行測試（仍在生產中，採用解決方法） - 並且可行。獎勵！ – 2012-04-18 16:54:14

好吧，對。您已設置live事件，因此我認爲認爲您的腳本也可能會將其設置爲選中狀態，但我無法完全告訴您在此處嘗試的內容而未看到標記，但這裏是我的重寫。

$('input.media-checkbox').live('click', function(e){ 

    if ($(this).is(':checked')) { 
     var m = $(this).attr('media'); 
     var mid = 'verify_' + m; 
     $(this).parents('div.state-container') 
      .find('ul.' + mid) 
      .remove(); 
     $(this).attr('checked', false); 
    } else { 
     var url = AJAX_URL; 
     var that = this; 
     $.ajax({ 
      type: 'GET', 
      url: url, 
      dataType: 'html', 
      success: function(data) { 
       $(that).parents('li') 
        .siblings('li.verification') 
        .children('div.media-verification') 
        .append(data) 
        .fadeIn(500); 
       $(that).attr('checked', true); 
      } 
     }); 
    } 
    return false; 

});

來源

2010-05-07 04:44:33 artlung

我需要'.live'事件處理程序，因爲有問題的表單在加載時不在文檔中 - 之後就是Ajax了。設置一個直的'.bind'將不起作用。 – 2010-05-07 04:49:50

它似乎是由於異步請求。在成功回調觸發之前，執行經過$.ajax。當你再次點擊複選框時，它的狀態還沒有被前一個請求的回調更新。你可以嘗試是對於觸發AJAX調用之前再次成功回調中禁用的CheckBox控件，並啓用它：

that.attr("disabled", "disabled"); 
var url = AJAX_URL; 
$.ajax({ 
    type: 'GET', 
    url: url, 
    dataType: 'html', 
    success: function(data){ 

     that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500); 
     that.attr('checked', 'checked'); 
     that.removeAttr('disabled'); 
    } 
});

這將確保兩個連續的點擊並不會導致不可預知的行爲。另一種方法是使用同步請求，即async: false，但會阻止整個瀏覽器的持續時間。

來源

2010-05-07 04:57:16 karim79

我喜歡這個 - 但是沒有。被切換的複選框已經在DOM中 - 這個ajax調用（對於第二個請求）是在對'：checked'進行測試之後進行的，因此ajax請求的成功不會影響複選框的狀態。選中一個複選框，然後jQuery讀取複選框的正確起始狀態 - 取消選中它，並在點擊事件處理程序之前清除該框。這很奇怪。 – 2010-05-07 05:13:33

嘗試使用e.stopPropagation()而不是e.preventDefault()，也刪除return false。在jQuery中返回false相當於e.stopPropagation() + e.preventDefault()。 e.preventDefault()可防止複選框爲checked。

來源

2010-05-11 22:36:21 Ajaxe

我認爲這是由於在IE中的一個奇怪的錯誤。檢查/設置屬性defaultChecked以及檢查。試試這個在您的if條件，

if (that.attr('checked')=='checked' || that.attr("defaultChecked")=='checked'){  
     var m = that.attr('media'); 
     var mid = 'verify_' + m; 
     that.parents('div.state-container').find('ul.' + mid).remove(); 
     that.attr('checked', false); 
     that.attr('defaultChecked', false); 
} else {

來源

2010-05-12 07:43:10 hetu

這可能只是局部的答案，但在您的測試，如果檢查，false如果沒有$(this).attr('checked')應該返回true。因此，只要改變你的條件，以if (that.attr('checked'))

來源

2010-05-14 20:01:11 mVChr

的jQuery/JavaScript的：在一個複選框和「檢查」屬性

回答

相關問題