Question

我正在使用cakephp并创建表单

<?php echo $form->create('User', array('action' => 'cancel'));?>
    <fieldset>
        <?php
            echo $form->input('terms', array('type' => 'checkbox', 'label' => __('Terms and Conditions', true)));
            echo $form->hidden('security', array('value' => $security));
            echo $form->end(__('Cancel My Account', true));
        ?>
    </fieldset>

现在我想要做的是，最初保持"Cancel My Account"按钮被禁用，并且只有在选中复选框时才应启用该按钮，从而执行其各自的操作，反之亦然。我使用以下脚本来检查复选框何时被选中

<script>
    $('document').ready(function(){
        $('#UserTerms').click(function() {
            var satisfied = $('#UserTerms:checked').val();
            if (satisfied != undefined) {
                $('.cancel-page div.submit input').removeAttr('disabled');
            } else {
                $('.cancel-page div.submit input').attr('disabled', 'disabled');
            }
        });
    });
</script>

但这不能正常运作。取消选中该复选框后，该按钮不会被禁用。请建议如何使其发挥作用。

Answer 1

建议，让我知道它是否有效：

<script type="text/javascript">

    // The function is defined outside the 'document ready' event
    function handleUserTermsChange() {

         // Save jQuery object in variable
        var $userTerms = $('#UserTerms');

        // Bind 'change' event to the checkbox
        $userTerms.bind('change', function() {

            // Save jQuery object in variable
            var $cancelAccountButton = $('.cancel-page div.submit input');

             // If the checkbox is checked..
            if ($userTerms.is(':checked')) {
                $cancelAccountButton.removeAttr('disabled');
            } else {
                $cancelAccountButton.attr('disabled', 'disabled');
            }

        }).trigger('change');
    }

    $(document).ready(function(){

        // The function is called in the 'document ready' event
        handleUserTermsChange();

    });

</script>

其$（文件），而不是$（'文件'） - 没有''
无需在'文件就绪'上定义功能，您可以先定义函数，然后在文档准备就绪时调用它。
最好使用'change'事件，而不是复选框的'click'事件。
最好在使用它们之前将jQuery对象保存在变量中，这样您就可以一直重复使用它们而不必一次又一次地创建它们
最好检查复选框是否已“选中”，而不是检查它是否“未定义”。
.trigger（'change'）用于运行该函数一次，这样我们检查复选框的初始状态（如果第一次加载页面时是否选中）

希望它有所帮助！

如何在未选中复选框时禁用按钮，反之亦然

1 个答案: