Question

我有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> 

我想啓用和禁用addrow按鈕，如果所有字段具有使用jQuery值

我曾嘗試

<!--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); 
}); }); }); }); }); 
}); 

Answer 1

$(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'); 
}); 

Answer 2

廣告d這個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'); 
     } 
    }); 

Answer 3

$(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>

Answer 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'); 
}); 

Answer 5

請注意，您的選擇框中的每個選項都沒有任何價值。

您可以輕鬆地綁定每個具有類表單控件的元素上的輸入事件以確定禁用狀態。

使用此代碼：

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); 
}); 

Answer 6

在<option>元件html這不是一個空字符串的屬性value提供一個值。

您可以設置<select>，<input>元素<form>元素的子節點，包括元素.btn元素required屬性，使用連接到forminput事件，請撥打.checkValidity()在if情況下，如果true呼叫.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>

Answer 7

您可以使用在<select>required屬性，<input>元素，:invalid，:validcss僞類選擇，<button>元素的pointer-events屬性設置爲none如果form無效或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>