ajaxcomplete后jquery调用变量

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 和下面的代码加载的复选框正在运行以获取下拉值，并且在 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>

问题：

variable "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');
         }
     });
});