Question

Please check above link.There is a note “*Please agree to the Privacy Policy and Disclaimer” I want to show this note onclick of button but only if I have checked “I have read and agree to the Privacy Policy and Disclaimer” this checkbox.At first I want to hide that note.I want to show that note onclick of button only when I have not checked that checkbox.Please advise…

Here is my code.

    $('#newprivacy').css('color','#ff0000');
 $('#newprivacy').hide();
 $('#btnContinue').click(function(e) { 
if(!document.getElementById('privacypolicy').checked) { 
// checkbox not checked e.preventDefault(); $('#newprivacy').show(); } else { 
$('#AccountSettingsForm').submit(); 
} });
 $('#privacypolicy').click(function(){ 
if ($('#privacypolicy').is(":checked")) {
 $('#newprivacy').hide();

     } });   } 

Its not working on chrome and IE why?

Answer 1

The majority of the functionality seems to be there, you just need to disable the button again if they uncheck the checkbox after checking it. I’ve made a few changes to your code below, namely:

1. Using the change event on the checkbox rather than the click event, this way it will still fire if they use their keyboard to change its state.
2. Using this to refer to the checkbox in the event handler function, rather than selecting it again, and accessing the checked property directly on the element, rather than using the jQuery .is() function.
3. Using the .prop() function rather than the .attr() function to modify the disabled property of the button.

jQuery code:

$("#btnContinue").prop("disabled", true);
$('#newprivacy').css('color', '#ff0000');
$('#privacypolicy').change(function() {
    if (this.checked) {
        $('#newprivacy').hide();
        $("#btnContinue").prop("disabled", false);
    }
    else {
        $('#newprivacy').show();
        $('#btnContinue').prop('disabled', true);
    }
});

I’m assuming the above code is either included in a $(document).ready() call or located at the end of the page, so that the elements are available when the code executes.

Note that the effects of the first two lines could also be achieved using HTML, saving the need to hide and color them using jQuery or JavaScript code.

And, if you really want to completely replace that logic with a click event handler on the button, this should do it:

$('#btnContinue').click(function(e) {
    if(!document.getElementById('privacypolicy').checked) {
        // checkbox not checked
        e.preventDefault();
        $('#newprivacy').show();
    }
    else {
        $('#AccountSettingsForm').submit();
    }
});