Form that reveals more fields as each step has been completed I'm new to JavaScript and jQuery and need input about how to optimize my script:

(document).ready(function() {

    var inputs_1 = $("form#myForm .case1 input, form#myForm .case1 select");
    var inputs_2 = $("form#myForm .case2 input, form#myForm .case2 select");
    var inputs_3 = $("form#myForm .case3 input");

    $("form#myForm .case2").addClass("disabled");
    $("form#myForm .case3").addClass("disabled");
    $("form#myForm .case2 input, form#myForm .case2 select").prop('disabled', true);
    $("form#myForm .case3 input").prop('disabled', true);

    var validateInputs = function validateInputs(inputs) {
      var validForm = true;
      inputs.each(function(index) {
        var input = $(this);
        if (!input.val()) {
            $("#subnewtide").prop('disabled', true);
            validForm = false;
        }
      });
      return validForm;
    }


    inputs_1.change(function() {
      if (validateInputs(inputs_1)) {
          $("form#myForm .case2").removeClass('disabled');
          $("form#myForm .case2 input, form#myForm .case2 select").prop('disabled', false);
      }
    });

    inputs_2.change(function() {
      if (validateInputs(inputs_2)) {
          $("form#myForm .case3").removeClass('disabled');
          $("form#myForm .case3 input").prop('disabled', false);
      }
    });

    inputs_3.change(function() {
      if (validateInputs(inputs_3)) {
          $("#subnewtide").prop('disabled', false);
      }
    });

});


It is a registration form. After a user has inserted all inputs from step1 the next step should be shown. so far so good. My solution works, but I guess it is not the best way to solve my issue.

How can I abstract this more to increase maintainability?

I need a way to use one XY.change(function) handler, not for everyone a single solution.
Code is pretty neat, though you might consider a couple of additional objectives : 


ensuring that elements are re-disabled if the user revisits an earlier form field and makes it invalid. 
allowing the validate/disable/enable system to work with as many cases as might appear in the form, without needing to amend the javascript.


I guess there are many ways these objectives could be met. 

Here's one way, in which :


the key actions ('validate' and 'disable') are written as custom event handlers. That proves to be very convenient as it allows elements to be given behaviours that can be triggered en bloc without needing to write jQuery plugins or loop manually in the high level application code.
several assumptions are made about the HTML/DOM_tree, in particular that .case1, .case3, .case3 select one element each.


HTML

Add class name case to all "case" containers.

JavaScript

jQuery(function($) {
    var $cases = $('.case'),
        $finalElement = $('#subnewtide'),
        $casesPlus = $cases.add($finalElement)
        fieldSelector = 'input, select'; // a reusable selector string

    // attach event handlers to $cases
    $cases.on('validate', function(event) { // custom event
        var $this = $(this),
            n = $this.index($cases), // index of this within $cases
            valid = true;
        $casesPlus.slice(n+1).trigger('disable', [true]); // unconditionally disable everything below `this`
        $(this).find(fieldSelector).each(function() {
            if (!$(this).val()) {
                valid = false;
                return false; // break out of .each() iteration
            }
        });
        if (valid) {
            // conditionally enable next case and trigger 'validate' on it ... and so on in cascade ...
            $casesPlus.slice(n+1, n+2).trigger('disable', [false]).trigger('validate');
        }
    }).on('disable', function(event, bool) { // custom event
        if (bool) {
            $(this).addClass('disabled').find(fieldSelector).prop('disabled', true);
        } else {
            $(this).removeClass('disabled').find(fieldSelector).prop('disabled', false);
        }
    }).on('change', fieldSelector, function(event) {
        $(this).closest('.case').trigger('validate');
    });

    // attach event handlers to $finalElement
    // (slightly different from $cases)
    $finalElement.on('disable', function(event, bool) {
        $(this).prop('disabled', bool);
    });

    // initially, enable the first case and trigger 'validate' to disable everything else.
    $cases.eq(0).trigger('disable', [false]).trigger('validate');
});


untested

This style of programming tends to suit form validation and spreadsheet-like applications.