Question

I am using cakephp and creating a form

<?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>

Now what i want to do is, initially keep the "Cancel My Account" button disabled and only when the checkbox is checked the button should be enabled and hence perform its respective action and similarly vice-versa. I am using the following script to check when the checkbox is checked

<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>

But this is not working properly. The button is not getting disabled when the checkbox is unchecked. Please suggest how to make it work.

Answer 1

A suggestion, let me know if it works:

<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>

• Its $(document), not $(‘document’) – without ”
• No need to define the function on ‘document ready’,
  you can first define the function and then just call it on document ready.
• Is better to use the ‘change’ event and not the ‘click’ event for check-boxes.
• Is better to save the jQuery objects in variables before using them, this way you can always re-use them without creating them again and again
• Is better to check if the check-box is ‘checked’ instead of checking if its not ‘undefined’.
• .trigger(‘change’) its used to run the function once, this way we check for the initial state of the check-box (if it’s checked or not when the page loads the first time)

Hope it helps!