Validation using checkbox

Question

I am using jQuery trying to validate that a checkbox has been checked before allowing a user to click on a 'Proceed' button.

The 'Proceed' button is set 'Enable = false' when the page loads.

So far I have tried :

// On check of the accept terms checkbox
             $(".chkTandCs").change(function () {
                 // If checked, enable the Continue button, else, disable it.
                 if ($(this).is(":checked")) {
                     $(".lbnAcceptCurrent").removeAttr('disabled');
                 }
                 else {
                     $(".lbnAcceptCurrent").attr("disabled", "disabled");
                 }
             });

This hasn't worked.

The checkbox and 'Proceed' button are inside a modal that opens when a different button has been clicked.

All help very much appreciated

Answer 1

Use prop() instead

$(".chkTandCs").change(function () {
     $(".lbnAcceptCurrent").prop('disabled', !this.checked);
});

If the modal generates the markup dynamically, you'll need to delegate

$(document).on('change', '.chkTandCs', function () {
     $(".lbnAcceptCurrent").prop('disabled', !this.checked);
});

and replace document with the closest static parent element of the modal