Question

我想检查按钮是启用还是禁用，但是在页面加载后添加按钮。我怎么能这样做？

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

我的代码：

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>

我的jquery的一部分只在这样写的时候起作用（包装在文档中）：

jQuery(document).on('change','.chk', function() {
   var checkCount=jQuery('.chk:checked').length;
   var totalCheckbox =jQuery('.chk').length;
   totalCheckbox==checkCount ? jQuery("#checkoutbtn").prop('disabled', false):jQuery("#checkoutbtn").prop('disabled', true);
  });

但我不知道如何将此.on('change')用于.is(:disabled)属性。

Answer 1

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

如果它来自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个命题你应该有很多其他的可能性。

Answer 2

您可以将代码包装在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");
}
})

<强>段

＆＃13;

$(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");
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 3

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

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

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官方参考：https://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/

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

3 个答案: