如果在jquery中输入和选择字段为空，如何将禁用属性添加到按钮

时间：2017-04-14 07:55:07

标签： javascript jquery

如果所有输入字段和所有选择下拉字段都为空但我没有运气，我试图向按钮添加禁用属性。 这是以下形式：

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

我已经为输入字段尝试了此代码，但仍无效 我怀疑是因为错误的选择器，我还没有为选择字段添加代码。

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

2 个答案:

答案 0 :(得分：0)

第一步：默认情况下禁用它 第二步：创建一个遵循此伪代码的函数

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，在JQuery中disabled不能prop但必须是attr。 在JQuery中，您可以使用$(/*selector*/).removeAttr(/*attribute*/)来实现它。

答案 1 :(得分：0)

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

如果我的方法正确，请检查表格和脚本。希望它对你有用。

相关问题
最新问题