在动态创建的元素上禁用复选框 jQuery

Question

我正在尝试使用 jQuery

禁用 GPA 计算器应用程序上的复选框元素

添加新课程时动态创建复选框，以指示学生是否重复该课程以填补他之前的成绩：

    if(hourSum < 21){
      $("<div class='course'>"
                       + "<div class='tdnum'>"
                       + "<span class='subNum' id='subNum" + i + "'>" + i + " </span>"
                       + "</div>"
                       + "<div class='tdgrade'>"
                       + "<span class='requiredMsg' id='markReq" + i + "'>*</span>"
                       + "<input type='number' class='mark'>"
                       + "<span class='errorMessage' id='markError" + i + "'>* between 35 - 100</span>"
                       + "</div>"
                       + "<div class='tdhour'>"
                       + "<span class='requiredMsg' id='shourReq" + i + "'>*</span>"
                       + "<input type='number' class='shour'>"
                       + "<span class='errorMessage' id='shourError" + i + "'>* between 1 - 3</span>"
                       + "</div>"
                       + "<div class='tdrep'>"
                       + "<input id='subState" + i + "' class='repSub' type='checkbox'>"
                       + "</div>"
                       + "<div class='tdpgrade'>"
                       + "<input type='number' class='rmark' id='rmark" + i + "' disabled>"
                       + "<span class='errorMessage' id='rmarkError" + i + "'>* between 35 - 100</span>"
                       + "</div>"
                       + "<div class='tddelete'>"
                       + "<span class='remove'><img src='img/delete.png'></span>"
                       + "</div>"
                   + "</div>").appendTo(".ctable").hide().fadeIn(300); // add fade effect on adding elements          
             i++;
   }

当经过的小时数 = 0 且总体平均值 = 0

时，我需要禁用 class .repSub 的复选框

"<input id='subState" + i + "' class='repSub' type='checkbox'>"

我试过这个方法：

 $(".repSub").prop("disabled", true);

我也试过：

$(".repSub").attr("disabled", 'disabled');

但这两种方法都不适用于动态创建的复选框

这个问题有什么可行的解决方案吗？

Answer 1

使用回调函数执行代码，实际上元素是动态加载的 dom 这就是为什么在您添加
时代码不起作用的原因 $(".repSub").prop("disabled", 真); 要么 $(".repSub").attr("disabled", 'disabled');

这是我在这里写的示例代码，在这里做一些改变

"+ </div>)".appendTo(".ctable").hide().fadeIn(300,function(){
$(".repSub").prop("disabled", true);
});

我只使用 fadeIn 回调函数，所以它会在 elem fadeIn 之后一直有效

请通知我这是否有效

如果它不起作用，您可以使用 Promise() 或 done() 方法来完成这些工作这是例子

var str = "<div id='xx'>Some content</div>";
$(str).appendTo("#qo").promise().done(function(){
$("#xx").html("Change the content");
$("#xx").prop("disabled", true);
});

"qo" 是一个 div id，我在其中动态放置 #xx div，然后在加载内容后我更改了一些内容并禁用了该元素。

请评论。

Answer 2

经过多次测试，我找到了很好的解决问题的办法

唯一对我有用的方法是他在回答中提到的方法

我在追加动态添加的元素后使用了带有回调函数的.promise().done(function(){})方法：

+"</div>").appendTo(".ctable").hide().fadeIn(300).promise().done(function(){
                  hour = Number($("#hrs").val());
                  avg = Number($("#avg").val());
                  if (hour === 0 && avg === 0) {
                    $(".repSub").prop("disabled", true);
                  } 
                  else {
                    $(".repSub").prop("disabled", false);
                  }
          });

问题解决方案的现场演示： https://jsfiddle.net/e9ubveL2/10/

在动态创建的元素上禁用复选框 jQuery

Disable checkbox on dynamically created elements jQuery

jquery

checkbox

attr