Javascript 在pageload之后加载的元素上使用jquery

我想检查某个按钮是启用还是禁用，但该按钮是在页面加载后添加的。我该怎么做

“我的代码”需要在禁用按钮时显示消息，并在启用代码时删除消息

我的代码：

jQuery(document).ready(function() {
    "use strict";

if(jQuery('#checkoutbtn').prop(':disabled')){
    console.log('disabled');
    jQuery("#voorwaarden").css("display", "inline-block");
}else{
    console.log('enabled');
    jQuery("#voorwaarden").css("display", "none");
}
});

我的html代码：

<div class="checkoutvoorwaarden" id="voorwaarden">Ga akkoord met onderstaande voorwaarden om door te gaan:</div>
<button type="submit" title="<?php echo $this->__('Place Order') ?>" disabled="disabled" class="button btn-checkout" id="checkoutbtn" onclick="review.save();"><span><?php echo $this->__('Place Order') ?></span></button>
<p><input type="checkbox" class="checkbox chk" id="voorwaarden" style="display:inline;" required/><b> Ik ga akkoord met de algemene voorwaarden <em style="color:#ff2727;">*</em></b></p>
<p><input type="checkbox" class="checkbox chk" id="geboorte" style="display:inline;"/><b> Ik ben ouder dan 18 jaar <em style="color:#ff2727;">*</em></b></p>

---

但是我不知道如何使用这个.on'change'作为.is:disabled属性。

您可以将代码包装在document.ready中。它将在创建按钮后执行，这意味着已加载完整的文档

$(document).ready(function(){
if(jQuery('#checkoutbtn').is(':disabled')){
    console.log('disabled');
    jQuery("#voorwaarden").css("display", "inline-block");
}else{
    console.log('enabled');
    jQuery("#voorwaarden").css("display", "none");
}
})

片段

$document.readyfunction{ 如果jQuery'checkoutbtn'.为“：已禁用”{ console.log'disabled'； jqueryvoorwarden.css显示，内联块； }否则{ console.log“已启用”； jqueryvoorwarden.css显示，无； } } Ga akkoord与onderstaande voorwaarden和door te gaan会面：

---

您需要检查按钮元素是否存在，如下所示：

这将检查第一个按钮是否已加载，如果已加载，则只有您的功能才能工作

if ( $( "#checkoutbtn" ).length ) {

   if(jQuery('#checkoutbtn').prop(':disabled')){
    console.log('disabled');
    jQuery("#voorwaarden").css("display", "inline-block");
}else{
    console.log('enabled');
    jQuery("#voorwaarden").css("display", "none");
}

}

---

JQUERY官方参考：

如果您想在元素上进行交互，则需要在添加元素后运行代码

var interval = window.setInterval(function(){
    if(jQuery('#checkoutbtn').length){
        //Check if element exists.
        window.clearInterval(interval);//Make sure we stop.
        if(jQuery('#checkoutbtn').is(':disabled')){
            console.log('disabled');
            jQuery("#voorwaarden").css("display", "inline-block");
        }else{
            console.log('enabled');
            jQuery("#voorwaarden").css("display", "none");
        }
    }
},1000);

如果它来自Ajax请求，则可以使用成功处理程序

如果它是一个添加元素的函数，请在完成工作后调用您的方法

您可以使用代码创建事件处理程序，并在每次需要时触发该事件

如果由于X或Y的原因，所有这些都失败了，您还可以使用间隔轮询文档，以便在添加元素后能够执行操作

var interval = window.setInterval(function(){
    if(jQuery('#checkoutbtn').length){
        //Check if element exists.
        window.clearInterval(interval);//Make sure we stop.
        if(jQuery('#checkoutbtn').is(':disabled')){
            console.log('disabled');
            jQuery("#voorwaarden").css("display", "inline-block");
        }else{
            console.log('enabled');
            jQuery("#voorwaarden").css("display", "none");
        }
    }
},1000);

---

请注意，这是最后的手段。使用前3个命题，您应该有很多其他的可能性。

请向我们展示添加按钮的代码。页面加载后，按钮是以哪种方式添加的$document.ready来得太早？@dave我正在使用Magento，所以我不确定技术细节，但我会在问题中添加我的html代码。@twan最后一个代码段onchange事件有什么问题？。为什么包括is:：disabled？它只关注单个元素，而不是multiple@prasad那部分很好用，它检查是否有1个或两个复选框未选中，如果是，则禁用按钮。我添加它是为了表明这段代码是有效的，所以我想我需要做一些类似的事情，但我不确定如何检查按钮是否被禁用。已经是了，我应该在我的问题中添加，我编辑了ityou document ready函数未正确关闭检查此}是对}的无效关闭更改，它已正确关闭，我自己很快添加了它，这是一个默认的magento文件。我还添加了一些额外的信息，如“如果它来自Ajax请求，您可以使用成功处理程序。”