JQuery dialog (with button) not working in IE9

问题

I have a jQuery dialog box showing some Ts and Cs. It renders with the submit button disabled

The user should tick a checkbox to confirm they have read them in order to enable the submit button.

This works fine in IE10, Chrome and Firefox.

However, in IE9 the dialog renders with the button enabled (although clicking it does not trigger a submit) and the check box doesn't do anything.

The code is:

    <a href="#" id="open_terms" title="Terms">Terms and conditions</a>

 <div id="terms" style="padding:12px">
            <p>
                On the day of the handover, a member of staff will take back your current laptop. 
                As such, it is your responsibility to ensure that you have backed up your data in advance of the handover, 
                ready to restore to your new laptop.
            </p>
            <p style="font-weight: bold">If your data is not backed up in advance, you may have to forfeit your booked slot and rebook the handover on another date.</p>
<input type="checkbox" id="cbTerms">Accept<br>

        </div>





$(function () {
                $('#open_terms').click(function(){
                   ShowDialog();
                });

            function ShowDialog() {

            $('#cbEula').prop('checked', true);

            $('#terms').css('visibility', 'block');
            $('#terms').dialog({
                modal: true,
                width: '500px',
                title: 'IMPORTANT! Remember To Backup Your Laptop',
                open: function (event, ui) {
                    $('.ui-dialog-titlebar-close').hide();
                    $(this).parent().appendTo('form');
                },
                buttons: {
                    "Submit": function () {
                        $('form:first').submit();
                    }
                }
            });
            var button = $(".ui-dialog-buttonpane button:contains('Submit')");
            console.log(button);
            $(button).button("disable");
        };



        $('#cbTerms').click(function () {

            var button = $(".ui-dialog-buttonpane button:contains('Submit')");
            console.log(button);

            if ($(this).is(':checked')) {

                $(button).button("enable");
                $('#cbEula').prop('checked', true);
            } else {

                $(button).button("disable");
                $('#cbEula').prop('checked', false);
            }
        });
    });

JSFiddle here: http://jsfiddle.net/bdgriffiths/wgJAE/

回答1:

Remove or comment out your console.log(button); statements. IE9 chokes on them unless the console is open.

回答2:

console.log will not work in IE9,8 and 7.

For reason check this SO answer. If you want to use logging in older version of IE, I would suggest you log4javascript.

Working fiddle removed console.log.

来源：https://stackoverflow.com/questions/17530590/jquery-dialog-with-button-not-working-in-ie9