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

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