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

我想添加一个禁用的属性按钮，如果所有输入字段和所有选择下拉字段为空，但我没有运气。这里的形式：如何添加禁用的属性按钮，如果输入和选择字段为空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); 
     } 
    }); 
});

来源

2017-04-14 dashred

此功能正在检查文件准备好然后所有输入将是空的权利？那么最重要的是什么。当用户输入值时，你不再检查是否正确？您还必须观看每个输入onchange。 – RemyaJ

你有JS错误吗？你也可以使用'.val（）'函数 – Cyril

是的，我不再检查它。我试图实现验证，以便它不会滑入下一个表单。像这样https://codepen.io/atakan/pen/gqbIz – dashred

第一步：使其默认情况下禁用第二步：使下面这个伪代码

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*/)来实现它。

来源

2017-04-14 08:20:23 Vivick

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

支票形式和脚本，如果我做了正确的方法。希望它能为你工作。

来源

2017-04-14 09:19:25

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

回答

相关问题