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/
