Как сделать кнопку отключенной, когда флажок не установлен и наоборот

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') используется для однократного запуска функции, таким образом мы проверяем начальное состояние флажка (если он установлен или нет, когда страница загружается в первый раз)

Надеюсь, это поможет!