Question

I have two input fields on my form – I’d like to only allow users to enter field2 if field 1 has valid data. How can I achieve this using jQuery.

Thanks in advance

Answer 1

//cache the second field to make the event handler perform faster
var field2 = document.getElementById('field2');
$('#one').on('change', function () {

    //check to make sure the value is "valid"
    if (this.value == '') {

        //if not valid then disable the input
        field2.disabled = true;
    } else {

        //if valid then enable the input
        field2.disabled = false;
    }
});

Here is a demo: http://jsfiddle.net/gL8Jq/

Note that .on() is new in jQuery 1.7 and in this case is the same as .bind(): http://api.jquery.com/on