Question

我正在尝试使用jQuery

禁用GPA Calculator App上的复选框元素

在添加新课程时动态创建复选框，以指示学生是否重复了课程以填写其上一年级：

    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

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

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

我试过这个方法：

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

我也尝试过：

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

但这两种方法都不能动态创建复选框

这个问题有没有解决方案？

Answer 1

使用回调函数来执行代码实际上元素是动态加载的dom，这就是为什么代码在你添加时没有工作的原因 $（“。repSub”）。prop（“disabled”，true）; 要么 $（“。repSub”）。attr（“禁用”，“禁用”）;

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

"+ </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

我在测试之后找到了解决问题的方法

对我来说唯一有效的方法是他在答案中提到的Ankur Das方法

在附加动态添加的元素之后，我使用了.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上的复选框

2 个答案: