如果jQuery中输入和选择字段为空，如何向按钮添加禁用属性

Question

I am trying to add a disabled attribute to the button if all input fields and all select dropdown fields are empty but I'm having no luck. Here's the form:

<form id="ridefinancing">
<fieldset id="details">
    <h3 class="fs-title">Your Details</h3>
    <div id="div_id_firstname" class="form-group required">
        <label for="id_firstname" class="control-label col-md-3  requiredField"> Firstname<span class="asteriskField">*</span> </label>
        <div class="controls col-md-9">
            <input class="form-control gradient" id="id_firstname" maxlength="30" name="firstname" style="margin-bottom: 10px" type="text" />
        </div>
    </div>
    <div id="div_id_lastname" class="form-group required">
        <label for="id_lastname" class="control-label col-md-3  requiredField"> Lastname<span class="asteriskField">*</span> </label>
        <div class="controls col-md-9 ">
            <input class="form-control gradient" id="id_lastname" maxlength="30" name="lastname" style="margin-bottom: 10px" type="text" />
        </div>
    </div>
    <div id="div_id_email" class="form-group required">
        <label for="id_email" class="control-label col-md-3  requiredField"> Email<span class="asteriskField">*</span> </label>
        <div class="controls col-md-9">
            <input class="form-control gradient" id="id_email" maxlength="30" name="email" style="margin-bottom: 10px" type="text" />
        </div>
    </div>
    <div id="div_id_phone" class="form-group required">
        <label for="id_phone" class="control-label col-md-3  requiredField"> Phone<span class="asteriskField">*</span> </label>
        <div class="controls col-md-9 ">
            <input class="form-control gradient" id="id_phone" maxlength="30" name="phone" style="margin-bottom: 10px" type="text" />
        </div>
    </div>
    <div id="div_id_birthday" class="form-group required">
        <label for="id_birthday" class="control-label col-md-3  requiredField"> Birthday<span class="asteriskField">*</span> </label>
        <div class="controls col-md-9">
            <div class="row">
                <div class="col-xs-4">
                    <select class="form-control gradient" id="id_day">

                    </select>
                </div>
                <div class="col-xs-4">
                    <select class="form-control gradient" id="id_month">

                    </select>
                </div>
                <div class="col-xs-4">
                    <select class="form-control gradient" id="id_year">
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div id="div_id_status" class="form-group required">
        <label for="id_status" class="control-label col-md-3  requiredField"> Marital Status<span class="asteriskField">*</span> </label>
        <div class="controls col-md-9">
            <select class="form-control gradient" id="id_status">
                <option>Please Select</option>
                <option>Single</option>
                <option>Married</option>
                <option>Divorced</option>
            </select>
        </div>
    </div>
    <div id="div_id_dlicense" class="form-group required">
        <label for="id_dlicense" class="control-label col-md-3  requiredField"> Driving License<span class="asteriskField">*</span> </label>
        <div class="controls col-md-9">
            <select class="form-control gradient" id="id_dlicense">
                <option>Please Select</option>
                <option>032654897</option>
            </select>
        </div>
    </div>
        <button disabled="disabled" type="submit" class="vhb next action-button" id="btn1">Continue</button>
</fieldset>

I have tried this code for the input fields but still not working I suspect it's because of the wrong selector, and I havent added the code yet for the select field.

<script type="text/javascript">
$(document).ready(function() {
    var $fields = $('#details :input');
    $fields.keyup(function() {
        var $emptyFields = $fields.filter(function() {
            return $.trim(this.value) === '';
        });
        if (!$emptyFields.length) {
            $('#btn1').prop('disabled', true);
        } else {
            $('#bt1').prop('disabled', false);
        }
    });
});

Answer 1

First step : make it disabled by default Second step: make a function that follows this pseudo code

on input change : function
   if(input 1.val()=="" || input 2.val()=="" /* etc... */) then
    set disabled to true
  else
    remove disabled attribute
  end if
end function 

BTW, in JQuery disabled mustn't a prop but must be an attr . In JQuery you can use $(/*selector*/).removeAttr(/*attribute*/) to achieve it.

Answer 2

 $('#a').on('keyup paste propertychange input', function() { if (this.value === "") $('#b').prop('disabled', true); else $('#b').removeAttr('disabled'); }); $('#b').on('keyup paste propertychange input', function() { if (this.value === "") $('#c').prop('disabled', true); else $('#c').removeAttr('disabled'); }); $('#c').on('keyup paste propertychange input', function() { if (this.value === "") $('#d').prop('disabled', true); else $('#d').removeAttr('disabled'); }); $('#d').on('keyup paste propertychange input', function() { if (this.value === "") $('#e').prop('disabled', true); else $('#e').removeAttr('disabled'); }); $('#e').on('keyup paste propertychange input', function() { if (this.value === "") $('#f').prop('disabled', true); else $('#f').removeAttr('disabled'); }); $('#f').on('keyup paste propertychange input', function() { if (this.value === "") $('#g').prop('disabled', true); else $('#g').removeAttr('disabled'); }); $('#g').on('keyup paste propertychange input', function() { if (this.value === "") $('#h').prop('disabled', true); else $('#h').removeAttr('disabled'); }); $('#h').on('keyup paste propertychange input', function() { if (this.value === "") $('#i').prop('disabled', true); else $('#i').removeAttr('disabled'); }); $('#i').on('keyup paste propertychange input', function() { if (this.value === "") $('#j').prop('disabled', true); else $('#j').removeAttr('disabled'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <form id="ridefinancing"> <fieldset id="details"> <h3 class="fs-title">Your Details</h3> <div id="div_id_firstname" class="form-group required"> <label for="id_firstname" class="control-label col-md-3 requiredField"> Firstname<span class="asteriskField">*</span> </label> <div class="controls col-md-9"> <input id="a" class="form-control gradient" id="id_firstname" maxlength="30" name="firstname" style="margin-bottom: 10px" type="text" /> </div> </div> <div id="div_id_lastname" class="form-group required"> <label for="id_lastname" class="control-label col-md-3 requiredField"> Lastname<span class="asteriskField">*</span> </label> <div class="controls col-md-9 "> <input id="b" disabled="disabled" class="form-control gradient" id="id_lastname" maxlength="30" name="lastname" style="margin-bottom: 10px" type="text" /> </div> </div> <div id="div_id_email" class="form-group required"> <label for="id_email" class="control-label col-md-3 requiredField"> Email<span class="asteriskField">*</span> </label> <div class="controls col-md-9"> <input id="c" disabled="disabled" class="form-control gradient" id="id_email" maxlength="30" name="email" style="margin-bottom: 10px" type="text" /> </div> </div> <div id="div_id_phone" class="form-group required"> <label for="id_phone" class="control-label col-md-3 requiredField"> Phone<span class="asteriskField">*</span> </label> <div class="controls col-md-9 "> <input id="d" disabled="disabled" class="form-control gradient" id="id_phone" maxlength="30" name="phone" style="margin-bottom: 10px" type="text" /> </div> </div> <div id="div_id_birthday" class="form-group required"> <label for="id_birthday" class="control-label col-md-3 requiredField"> Birthday<span class="asteriskField">*</span> </label> <div class="controls col-md-9"> <div class="row"> <div class="col-xs-4"> <select id="e" disabled="disabled" class="form-control gradient" id="id_day"> <option>1</option> <option>2</option> <option>3</option> </select> </div> <div class="col-xs-4"> <select id="f" disabled="disabled" class="form-control gradient" id="id_month"> <option>Please Select</option> <option>1</option> <option>2</option> <option>3</option> </select> </div> <div class="col-xs-4"> <select id="g" disabled="disabled" class="form-control gradient" id="id_year"> <option>2014</option> <option>2015</option> <option>2016</option> </select> </div> </div> </div> </div> <div id="div_id_status" class="form-group required"> <label for="id_status" class="control-label col-md-3 requiredField"> Marital Status<span class="asteriskField">*</span> </label> <div class="controls col-md-9"> <select id="h" disabled="disabled" class="form-control gradient" id="id_status"> <option>Please Select</option> <option>Single</option> <option>Married</option> <option>Divorced</option> </select> </div> </div> <div id="div_id_dlicense" class="form-group required"> <label for="id_dlicense" class="control-label col-md-3 requiredField"> Driving License<span class="asteriskField">*</span> </label> <div class="controls col-md-9"> <select id="i" disabled="disabled" class="form-control gradient" id="id_dlicense"> <option>Please Select</option> <option>032654897</option> </select> </div> </div> <button id="j" disabled="disabled" type="submit" class="vhb next action-button" id="btn1">Continue</button> </fieldset> 

check the form and script if i have done correct way . Hope it will work for you .