如果不需要填写所有输入,如何禁用按钮?

Posted

技术标签:

【中文标题】如果不需要填写所有输入,如何禁用按钮?【英文标题】:How to disable button if all the inputs don't needed to be filled? 【发布时间】:2021-07-13 13:20:22 【问题描述】:

我必须禁用表单中的按钮,但并非所有输入都是必需的。在我的代码中,我已经编写了需要填写哪些输入,但我仍然必须填写表单中的所有输入。我应该如何改变它?

$('#billing_first_name, #billing_last_name, #billing_address_1, #billing_postcode, #billing_city, #billing_phone, #billing_email').bind('keyup', function dataFilled() 
  $('form > input').keyup(function() 
    var empty = false;
    $('form > input').each(function() 
      if ($(this).val() == '') 
        empty = true;
      
    );

    if (empty) 
      $('#place_order').attr('disabled', 'disabled');
     else 
      $('#place_order').removeAttr('disabled');
    
  );
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  Name<br>
  <input type="text" id="billing_first_name" name="billing_first_name"><br> Surname<br>
  <input type="text" id="billing_last_name" name="billing_last_name"><br> Company's Name (optional)<br>
  <input type="text" id="billing_company" name="billing_company"><br> Street<br />
  <input type="text" id="billing_address_1" name="billing_address_1"><br> Postal code<br>
  <input type="text" id="billing_postcode" name="billing_postcode"><br> City<br>
  <input type="text" id="billing_city" name="billing_city"><br> Phone<br>
  <input type="text" id="billing_phone" name="billing_phone"><br> E-mail<br>
  <input type="text" id="billing_email" name="billing_email"><br>
  <button type="submit" name="place_order" id="place_order" value="Buy" disabled="disabled">Buy</button>
</form>

【问题讨论】:

给出需要填充的元素或不需要填充的元素 - 然后根据此选择检查是否为空的字段。 【参考方案1】:

有更好的方法来处理这个问题,但只需对现有代码进行最少的更改,就可以预先存储输入:

var requiredFields = $('#billing_first_name, #billing_last_name, #billing_address_1, #billing_postcode, #billing_city, #billing_phone, #billing_email');
requiredFields.on('input', function () 
    var empty = false;
    requiredFields.each(function() 
      if ($(this).val() == '') 
        empty = true;
      
    );

    if (empty) 
      $('#place_order').attr('disabled', 'disabled');
     else 
      $('#place_order').removeAttr('disabled');
    
);

我还删除了会被多次添加的内部事件


另一种方法是提供您想要的特定类的输入,然后使用它,例如:

$('.required').on('input', function () 
    var empty = false;
    $('.required').each(function() 
      if ($(this).val() == '') 
        empty = true;
      
    );

    if (empty) 
      $('#place_order').attr('disabled', 'disabled');
     else 
      $('#place_order').removeAttr('disabled');
    
);
<input type="text" class="required" id="billing_first_name" name="billing_first_name">

【讨论】:

以上是关于如果不需要填写所有输入,如何禁用按钮?的主要内容,如果未能解决你的问题,请参考以下文章

按钮将禁用,直到所有输入未被填满 无法正常工作

禁用表单提交按钮,而不阻止 HTML5 验证

如果文本字段被快速填写,则启用按钮

最初输入字段不是强制性的,但仍然禁用提交按钮?

禁用基于三个文本框字段的按钮

html 禁用提交按钮,直到填写完所有字段