Question

我正在尝试在未选中复选框时禁用按钮，并在选中时再次启用它。

所以为了测试我在代码中添加了一个控制台日志，但是当我选中复选框时，我的控制台中没有消息。

我的代码：

the_terms.click(function() {
            console.log('test');
        if (jQuery(this).is(":checked")) {
            jQuery("#checkoutbtn").removeAttr("disabled");
        } else {
            jQuery("#checkoutbtn").attr("disabled", "disabled");
        }
    });

然后按钮和复选框：

<button type="submit" title="<?php echo $this->__('Place Order') ?>" class="button btn-checkout" id="checkoutbtn" onclick="review.save();" disabled="disabled"><span><?php echo $this->__('Place Order') ?></span></button>
<p><input type="checkbox" class="checkbox" id="voorwaarden" style="display:inline;"/><b> Ik ga akkoord met de algemene voorwaarden</b></p>

怎么了？

Answer 1

您提供的代码the_terms永远不会被定义。您复选框的id为voorwaarden，在jquery id选择器中使用它。

jQuery('#voorwaarden').click(function() {
    console.log('test');
    if (jQuery(this).is(":checked")) {
        jQuery("#checkoutbtn").removeAttr("disabled");
    } else {
        jQuery("#checkoutbtn").attr("disabled", "disabled");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<button type="submit" class="button btn-checkout" id="checkoutbtn" onclick="review.save();" disabled="disabled"><span>Place Order</span></button>
<p><input type="checkbox" class="checkbox" id="voorwaarden" style="display:inline;"/><b> Ik ga akkoord met de algemene voorwaarden</b></p>

如评论所述，您应该使用.change处理程序而不是.click，而if (jQuery(this).is(":checked"))最好写为if(this.checked)。

您的意图的更合适的代码将是

jQuery('#voorwaarden').change(function() {
    jQuery("#checkoutbtn").prop('disabled', !this.checked)
});

如果您在页面加载后动态添加复选框，请使用此

jQuery(document).on('change','#voorwaarden', function() {
    jQuery("#checkoutbtn").prop('disabled', !this.checked)
});

检查复选框是否已选中且禁用按钮不起作用

1 个答案: