jQuery的調用變量ajaxcomplete

Question

整體思路是通過下拉限制數量複選框後，其做法是： 我有下拉與下面的代碼

<select name="form[norequnit][]" id="norequnit" class="rsform-select-box"> 
    <option value="">...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
</select> 
<input name="chk" type="checkbox" class="bd-lable" value="9432"><label>01</label> 
<input name="chk" type="checkbox" class="bd-lable" value="9432"><label>02</label> 
<input name="chk" type="checkbox" class="bd-lable" value="9432"><label>03</label> 
<input name="chk" type="checkbox" class="bd-lable" value="9432"><label>04</label> 
<input name="chk" type="checkbox" class="bd-lable" value="9432"><label>05</label> 
<input name="chk" type="checkbox" class="bd-lable" value="9432"><label>06</label> 

和由Ajax和下面的代碼加載一些複選框運行時獲得下拉值也阿賈克斯部分後，以限制基於所選的下拉選擇的數量，

<script type="text/javascript"> 
jQuery(document).ready(function($) { 

$("#norequnit").on("change", function() { 
$('#unitcount').html($(this).find('option:selected').text()); 
}); 

$(document).ajaxComplete(function() { 

    $(".log").text("Triggered ajaxComplete handler."); 

     var nux = $('#unitcount').text(); 

     $("input[name=chk]").change(function(){ 

    var max= nux; 

    if($("input[name=chk]:checked").length == max) 
     { 
      $("input[name=chk]").attr('disabled', 'disabled'); 
      $("input[name=chk]:checked").removeAttr('disabled'); 
     }   
     else{ 
      $("input[name=chk]").removeAttr('disabled'); 
      } 
     }) 
    }); 

    }); 
    </script> 

問題：

變量「nux」僅在第一次嘗試時通過選擇下拉菜單來獲得價值，例如5，以便將這些框限制爲5次支票，但在此之後，如果將下拉列表更改爲任何其他數字，則複選框限制將保留爲5，換句話說「nux」不會得到新的變量。

Answer 1

你的代碼有一些問題，我會嘗試一遍一遍地解釋和修復它們。

選擇onChange處理：

1. 獨立您從您的視圖
2. 使用val()代替text()數據獲得選擇的當前值

代碼：

var nux; // 1. This will hold the value of nux for use in your script 

$("#norequnit").on("change", function() { 
    nux = $(this).val(); // 1. Save the data, 2. Use using val() 
    $('#unitcount').html(nux); // 1. Use the data 
}); 

待辦事項你真的需要使用ajaxComplete？

我不認爲ajaxComplete是迴應ajax調用（我可能是錯的，我沒有你所有的代碼在我面前）的正確方法。下面我已經做了一個最好的猜測，你應該做什麼（也許可能）。

代碼：

// Assuming you've got your ajax call somewhere else, use the "success" 
// handler instead of the "ajaxComplete" function 

$.ajax({ 
    url: yourUrl, 
    method: 'get', 
    data: { 
     param1: 'value1', 
     param2: 'value2', // etc 
    }, 
    success: function(html) { 
     // Presumably this is the HTML for your checkboxes, so add them 
     // to the DOM 
     $('#norequnit').after(html); 

     // And the only thing that really should go here otherwise is 
     // your bit of debug logging 
     console.log("Triggered ajax success handler."); 
    } 
}); 

使用console.log，如果你只是輸出調試文本

也許你實際上要打印的頁面上的信息，如果是的話，你可以忽略這一點。至少，請注意這個奇妙的調試工具。您可以在瀏覽器中點擊F12（開發人員控制檯）查看輸出。

console.log("Triggered ajaxComplete handler."); 

移動你的複選框onChange處理任何AJAX關閉

你可以調試的問題，否則會碰到一些非常努力之外。

代碼：

$(document).on('change', 'input[name="chk"]', function() { 
    // Handler code here 
}); 

通知的稍微不同的呼叫到on，其使用document對象幷包括上下文參數。這可確保在註冊事件處理程序後之後添加到DOM 的任何對象仍將被處理。

所有這一切都在一起

jQuery(document).ready(function($) { 
    var nux; 

    $("#norequnit").on("change", function() { 
     nux = $(this).val(); 
     $('#unitcount').html(nux); 
    }); 

    $.ajax({ 
     url: yourUrl, 
     method: 'get', 
     data: { 
      param1: 'value1', 
      param2: 'value2', // etc 
     }, 
     success: function(html) { 
      $('#norequnit').after(html); 
      console.log("Triggered ajax success handler."); 
     }     
    }); 

    $(document).on("change", 'input[name="chk"]', function() { 
     if ($('input[name="chk"]:checked').length == nux) { 
      $('input[name="chk"]').attr('disabled', 'disabled'); 
      $('input[name="chk"]:checked').removeAttr('disabled'); 

      // Alternatively you could do this: 
      $('input[name="chk"]').not(':checked').attr('disabled', true); 
     } else { 
      $("input[name=chk]").removeAttr('disabled'); 
     } 
    }); 
});