Question

So I have this basic form

<form id="order" action="contact.php" method="post">
    <p>Your name: <span><input type="text" name="name" id="fname"></span></p>
    <p>Your e-mail: <span><input type="text" name="email" id="femail"></span></p>
    <p><input type="checkbox" value="1" name="tos" id="ftos"></p>
    <p><input type="submit" value="Send" id="fsubmit"> | <span><input type="reset" value="Clear"></span></p>
</form>

All I want is to make the submit button a little bit faded and un-clickable if the TOS checkbox is not checked.

if the checkbox is check, then the button will unfade and become clickable.

I am not really good on jquery but I believe it can be accomplish on Jquery.

I hope anyone could help me.

Regards,
Ken

Answer 1

here it is… Fiddle Example

HTML:

<form id="order" action="contact.php" method="post">
    <p>Your name: <span><input type="text" name="name" id="fname"></span></p>
    <p>Your e-mail: <span><input type="text" name="email" id="femail"></span></p>
    <p><input type="checkbox" value="1" name="tos" id="ftos"></p>
    <p><input type="submit" value="Send" id="fsubmit"> | <span><input type="reset" value="Clear"></span></p>
</form>

JS:

function checkTOS() {      
    var checkbox = $("#ftos").is(':checked');

    if (checkbox === true) {
       $("#fsubmit").prop("disabled",false);
    } else {
       $("#fsubmit").prop("disabled",true);
    }

}

jQuery(document).ready(function(){   
     checkTOS();
    $('#ftos').click( function() {
        checkTOS();
    });

});