代码之家 › 专栏 › 技术社区 › Oghli

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

attr checkbox jquery

Oghli · 技术社区 · 8 年前

该复选框在添加新课程时动态创建,以指示学生是否重复该课程以填补其先前的成绩:

    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++;
   }

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

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

我试过这个方法:

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

我还尝试了:

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

2 回复 | 直到 8 年前

Ankur Das 8 年前

使用回调函数来执行代码实际上元素是在dom上动态加载的,这就是为什么在添加
$(“.repSub”)。道具(“禁用”,真);

这是我在这里编写的示例代码, 在这里换个地方

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

请通知我这是否有效

如果它不起作用,您可以使用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,然后在加载内容后更改一些内容并禁用元素。

请发表评论。

Community Mohan Dere 6 年前

唯一适合我的方法是 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/