DOM没有被正确触发的函数内部操纵

Question

我编写了这个函数来验证表单中的所有表单字段和复选框都已填写完毕。该脚本会自动禁用提交按钮，然后监视可以重新启用它的时刻。我的debugger语句将我放在所有适当的位置，但由于某种原因，DOM元素没有被更新。我确定我只是犯了一个愚蠢的错误，但似乎无法找到解决方案。提前感谢您的帮助！

具体看这一部分：

if (status === 'enable') {
          btn.removeAttr('disabled');
          btn.removeClass('disabled');
        } else {
          btn.prop('disabled', true);
          btn.addClass('disabled');
        }

以下是整个脚本。

   $(document).ready(function() {
      validateInput();

      $('.validate').keyup(function(event){
        validateInput();
      });

      $('[type=checkbox]').click(function(event){
        validateInput();
      });

      function validateInput() {
        var valid = 0;
        var checkBox = $('[type=checkbox]');
        var inputFields = $('input.validate');
        var inputLength = inputFields.length + checkBox.length;

        inputFields.each(function() {
          if($(this).val() !== '') {
            valid++ ;
          }
        });

        checkBox.each(function() {
          if($(this).prop('checked')) {
            valid++ ;
          }
        });

        if(valid === inputLength) {
          updateBtnStatus('enable')
        } else {
          updateBtnStatus('disable')
        }
      }

      function updateBtnStatus(status) {
        var btn = $('input[type="submit"]');
        if (status === 'enable') {
          btn.removeAttr('disabled');
          btn.removeClass('disabled');
        } else {
          btn.prop('disabled', true);
          btn.addClass('disabled');
        }
      }
    });