jquery - 禁用/启用提交按钮的 jQuery 自定义插件

Question

我的网站上有多个表单，只要所有输入都具有某些值，我就想更改提交按钮的禁用属性。

我决定创建一个基本插件，而不是为每个表单元素复制粘贴相同的代码行，这样我就可以在我想要的任何表单上调用它，但是，问题是每当我调用该函数时，它都会在控制台中出现错误

未捕获的 ReferenceError：在 HTMLInputElement 中未定义 buttonToggle。(custom.js:35)

这是我的 jQuery 插件代码

$.fn.buttonToggle = function() {
    var empty = false;
    $(this).each(function(){
        if ($(this).val() == '') {
            empty = true;
        }
    });
    if (empty) {
        $('button[type="submit"]').attr('disabled', 'disabled');
    }
    else {
        $('button[type="submit"]').removeAttr('disabled');
    }
};

//calling function on forms 

$('#user-login-form input').on('keyup change', function(){
    buttonToggle();
});

$('#user-signup input').on('keyup change', function(){
    buttonToggle();
});

请指导我在这里做错了什么

标签： jquery

Answer 1

您不是在调用 jQuery 函数，而是在调用一个名为 buttonToggle 的全局函数。要使其工作，请执行以下操作：

$('#user-login-form input').on('keyup change', function(){
    $('#user-login-form').buttonToggle();
});

$('#user-signup input').on('keyup change', function(){
    $('#user-signup').buttonToggle();
});

可能一个插件是一个矫枉过正。您可以将事件处理程序更改为：

function toggleButton() {
  var empty = $(this).parent().find("input").filter(function() {
    return this.value === "";
  });
  if (empty.length > 0) {
    $('input[type="button"]').attr('disabled', 'disabled');
  } else {
    $('input[type="button"]').removeAttr('disabled');
  }
}

$('#user-login-form input, #user-signup input').on('keyup change', toggleButton);

input {
  display: block;
  margin: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="user-login-form">
  <input type="text">
  <input type="text">
  <input type="text">
</div>
<div id="user-signup">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

<input type='button' value='This is a button' disabled>