如何使用 jquery 检查多个输入字段中是否有值？答案

【问题标题】：How to check mulitple input fields have values in it using jquery?如何使用 jquery 检查多个输入字段中是否有值？
【发布时间】：2017-09-01 01:41:30
【问题描述】：

我有 5 个输入字段，3 个是选择，2 个是输入类型和 1 个提交按钮。当所有字段都有值时，我想启用提交按钮。如果缺少任何值，按钮应该像 & 条件一样再次禁用

以下是我的代码

<select class='form-control class-manufacturer' name="" id='id_manufacturer>
        <option value="" selected disabled>Manufacturer *</option>
        <option value="">Apple</option>
        <option value="">Samsung</option>
</select>
<select class='form-control class-modelName' name="" id='id_modelName">
        <option value="" selected disabled>Model *</option>
        <option value="" >Iphone</option>
        <option value="" >Note</option>
</select>
<select class='form-control class-partName' name="" id='id_partName' >
        <option value="" selected disabled>Part *</option>
        <option value="" >IC</option>
        <option value="">LED</option>
</select>
<input type="text" name='' id="id_quantity" class="form-control class-quantity" pattern="^[0-9]{1,}$" maxlength="11" placeholder="Quantity *"/>
<input type="text" name='' id="id_costPerUnit" class="form-control class-costPerUnit" pattern="^[0-9]{1,}$" maxlength="11" placeholder="Price *"/>

<button type="button" class="btn btn-default add-row a"  onclick="add()" disabled='disabled' style="padding:10px 65px;">Add</button>

如果所有字段都有使用 jquery 的值，我想启用和禁用 addrow 按钮

我尝试过的

<!--add button disable enable function-->
$(function(){
 var i;
$('.class-manufacturer').change(function(){
$('.class-modelName').change(function() {
$('.class-partName').change(function(){

$('.class-quantity').keypress(function() {
$('.class-costPerUnit').keypress(function(){

$('.add-row').prop('disabled', false);
}); }); }); }); });
 });

【问题讨论】：

您尝试过哪些问题需要帮助
使用 jquery 验证插件或仅在 if else 中验证，然后启用/提交您的表单。
你能给我代码吗
$(function(){ var i; $('.class-manufacturer').change(function(){ $('.class -modelName').change(function() { $('.class-partName').change(function(){ $('.class-quantity').keypress(function() { $('.class-costPerUnit ').keypress(function(){ $('.add-row').prop('disabled', false); }); }); }); }); }); });
参考此文档...jqueryvalidation.org/documentation

标签： javascript jquery html

【解决方案1】：

$(document).ready(function(){
var $classmanufacturer = $('.classmanufacturer');
var $classmodelName = $('.classmodelName');
var $classpartName = $('.classpartName');
var $classquantity = $('.classquantity');
var $classcostPerUnit = $('.classcostPerUnit');
var $addbtn = $('.addbtn')
  $('select, input').on('change keypress', function(){
    if(($classmanufacturer.val() != '') && ($classmodelName != '') && ($classpartName.val() != '') && ($classquantity.val() != '') && ($classcostPerUnit.val() != '')){
        $addbtn.removeAttr('disabled');
    } else {
      $addbtn.attr('disabled', 'disabled');
    }
  })
})

function add() {
  alert("enabled");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='form-control classmanufacturer' name="" id='id_manufacturer'>
        <option value="">Manufacturer *</option>
        <option value="Apple">Apple</option>
        <option value="Samsung">Samsung</option>
</select>
<select class='form-control classmodelName' name="" id="id_modelName">
        <option value="">Model *</option>
        <option value="Iphone" >Iphone</option>
        <option value="Note" >Note</option>
</select>
<select class='form-control classpartName' name="" id='id_partName' >
        <option value="">Part *</option>
        <option value="IC" >IC</option>
        <option value="LED">LED</option>
</select>
<input type="text" name='' id="id_quantity" class="form-control classquantity" pattern="^[0-9]{1,}$" maxlength="11" placeholder="Quantity *"/>
<input type="text" name='' id="id_costPerUnit" class="form-control classcostPerUnit" pattern="^[0-9]{1,}$" maxlength="11" placeholder="Price *"/>

<button type="button" class="btn btn-default add-row a addbtn"  onclick="add()" disabled='disabled' style="padding:10px 65px;">Add</button>

【讨论】：

它工作但是当我从中删除任何值时应该再次禁用。我想要像 & 状态的解决方案
我有ajax调用来选择selecr的删除
ajax 的响应是对象或数组

【解决方案2】：

   $(document).on('keyup change', 'form', function(){
  // Loop through all elements of form
  $.each($('form').find(':input'), function(){
    if($(this).val() == ""){
      // If any value is empty, disable button and break the loop
      $('button').attr('disabled', 'disabled');
      return false;
    }
  })
  // Else if all are filled
  $('button').removeAttr('disabled');
});

【讨论】：

【解决方案3】：

添加这个HTML

<input type="submit" id="addRow" value="addRow" disabled="disabled" />

使用此js 代码

$(function() {
    $('form > input').keyup(function() {

        var checkEmpty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
                checkEmpty = true;
            }
        });

        if (checkEmpty ) {
            $('#addRow').attr('disabled', 'disabled'); 
        } else {
            $('#addRow').removeAttr('disabled'); 
        }
    });

【讨论】：

【解决方案4】：

看看这段代码：

$(document).on('keyup change', 'form', function(){
  // Loop through all elements of form
  $.each($('form').find(':input'), function(){
    if($(this).val() == ""){
      // If any value is empty, disable button and break the loop
      $('button').attr('disabled', 'disabled');
      return false;
    }
  })
  // Else if all are filled
  $('button').removeAttr('disabled');
});

【讨论】：

【解决方案5】：

请注意，选择框中的每个选项都没有价值。

您可以轻松地将输入事件绑定到具有类 form-control 的每个元素上，以确定禁用状态。

使用此代码：

function checkForm() {
    var disable = false;
    $(".form-control").each(function() {
        var value = $(this).val();
        if (!value) {
            disable = true;
            return false;
        }
    });

    $("button.add-row").prop("disabled", disable);
}

$(function() {
    $(".form-control").on("input", checkForm);
});

【讨论】：

【解决方案6】：

在<option> 元素html 的value 属性处提供一个非空字符串的值。

您可以将<select>、<input>元素设置为<form>元素的子节点，在元素中包含required属性，使用input事件附加到form，在if处调用.checkValidity()条件，如果true 在.btn 元素上调用.removeAttribute()，以"disabled" 作为参数，否则以"disabled" 作为第一和第二参数调用.setAttribute()

document.querySelector("form[name=form]")
.oninput = function() {
    if (this.checkValidity()) {
      this.querySelector(".btn")
      .removeAttribute("disabled")
    } else {
      this.querySelector(".btn")
      .setAttribute("disabled", "disabled")
    }
}

<form name="form">
  <select class='form-control class-manufacturer' name="" id='id_manufacturer' required>
        <option value="" selected disabled>Manufacturer *</option>
        <option value="Apple">Apple</option>
        <option value="Samsung">Samsung</option>
</select>

  <select class='form-control class-modelName' name="" id="id_modelName" required>
        <option value="" selected disabled>Model *</option>
        <option value="Iphone">Iphone</option>
        <option value="Note">Note</option>
</select>

  <select class='form-control class-partName' name="" id='id_partName' required>
        <option value="" selected disabled>Part *</option>
        <option value="IC" >IC</option>
        <option value="LED">LED</option>
</select>
  <input type="text" name='quantity' id="id_quantity" class="form-control class-quantity" pattern="[0-9]{1,}" maxlength="11" placeholder="Quantity *" required/>
  <input type="text" name='cost' id="id_costPerUnit" class="form-control class-costPerUnit" pattern="[0-9]{1,}" maxlength="11" placeholder="Price *" required/>
  <button type="button" class="btn btn-default add-row a" onclick="alert('valid')" style="padding:10px 65px;" disabled>Add</button>
</form>

【讨论】：

【解决方案7】：

您可以在<select>、<input> 元素、:invalid、:valid css 伪类选择器处使用required 属性，如果@ 则将pointer-events 元素的pointer-events 属性设置为none 987654332@ 无效或all 如果有效

form:invalid button.btn {
  pointer-events: none;
}

form:valid button.btn {
  pointer-events: all;
}

<form name="form">
  <select class='form-control class-manufacturer' name="" id='id_manufacturer' required>
        <option value="" selected disabled>Manufacturer *</option>
        <option value="Apple">Apple</option>
        <option value="Samsung">Samsung</option>
</select>

  <select class='form-control class-modelName' name="" id="id_modelName" required>
        <option value="" selected disabled>Model *</option>
        <option value="Iphone">Iphone</option>
        <option value="Note">Note</option>
</select>

  <select class='form-control class-partName' name="" id='id_partName' required>
        <option value="" selected disabled>Part *</option>
        <option value="IC" >IC</option>
        <option value="LED">LED</option>
</select>
  <input type="text" name='quantity' id="id_quantity" class="form-control class-quantity" pattern="[0-9]{1,}" maxlength="11" placeholder="Quantity *" required/>
  <input type="text" name='cost' id="id_costPerUnit" class="form-control class-costPerUnit" pattern="[0-9]{1,}" maxlength="11" placeholder="Price *" required/>
  <button type="button" class="btn btn-default add-row a" onclick="alert('valid')" style="padding:10px 65px;" >Add</button>
</form>

【讨论】：

只需要css吗？
@stone 是的，保存html 处的onclick 属性事件，它在stacksn-ps 调用alert() 而不是add()。如果form 是:invalid 的pointer-events button 元素在css 处设置为none，否则pointer-events 在button 元素处设置为all，这允许点击@987653在元素处分派onclick 事件的元素。见:invalid、pointer-events
我在页面中有 2 个表单
但我想将表单用于 1 个表单
@stone 在css 调整选择器以定位适当的<form> 元素，例如form[name="form"]:invalid{pointer-events:none}form[name="form"]:valid{pointer-events:all}，或者使用:nth-of-type() 伪类选择器来定位特定的form 元素，如果@987654356 @ 元素没有唯一的 .id 或 .className 来选择元素。两个form 元素是否具有相同的.className？