Javascript 填写表单中的所有输入后，按钮未启用

我开发了一个表单，当用户填写所有输入字段时，将启用提交按钮。我的问题是“提交”按钮未启用。我正在使用jQuery

var UserCampusName=“0”；
var EmpID=null；
var FirstName=null；
var LastName=null；
var mobileNo=null；
var=null；
var userRoles=“0”；
$（'SubmitUserRole'）.attr（'disabled'，'disabled'）；
$（函数（）{
$（“#userRoleForm”）.hover（函数（）{
UserCampusName=$（'#UserCampus'）.val（）
EmpID=$（'#UserEmpID'）.val（）
FirstName=$（'#UserEmpFirstName'）.val（）
LastName=$（'#UserEmpLastName'）.val（）
mobileNo=$（'#UserEmpMobileNo'）.val（）
EmpEmail=$（'#UserEmpEmail'）.val（）
userRoles=$（'#Roles'）.val（）
如果（（FirstName.length>0）和&（LastName.length>0）和&（mobileNo.length>0）和&（EmpEmail.length>0）和&（EmpID.length>0）和&（userRoles！=0）和&（UserCampusName！=0））{
$（'SubmitUserRole'）.removeAttr（'disabled'）；
}
否则{
$（'SubmitUserRole'）.attr（'disabled'，'disabled'）；
}
})
})

用户角色和权限设置
选定部门*
--挑选--
输入员工id*
输入名字*
输入中间名
输入姓氏*
输入手机号码*
输入电子邮件Id*
选择适用的用户角色和权限*
提交用户

填写所有字段，然后单击提交。它正在工作

var UserCampusName=“0”；
var EmpID=null；
var FirstName=null；
var LastName=null；
var mobileNo=null；
var=null；
var userRoles=“0”；
$（'SubmitUserRole'）.attr（'disabled'，'disabled'）；
$（函数（）{
$（“#userRoleForm”）.hover（函数（）{
UserCampusName=$（'#UserCampus'）.val（）
EmpID=$（'#UserEmpID'）.val（）
FirstName=$（'#UserEmpFirstName'）.val（）
LastName=$（'#UserEmpLastName'）.val（）
mobileNo=$（'#UserEmpMobileNo'）.val（）
EmpEmail=$（'#UserEmpEmail'）.val（）
userRoles=$（'#Roles'）.val（）
如果（（FirstName.length>0）和&（LastName.length>0）和&（mobileNo.length>0）和&（EmpEmail.length>0）和&（EmpID.length>0）和&（userRoles！=0）和&（UserCampusName！=0））{
$（'SubmitUserRole'）.removeAttr（'disabled'）；
}
否则{
$（'SubmitUserRole'）.attr（'disabled'，'disabled'）；
}
})
})

用户角色和权限设置
选定部门*
--挑选--
输入员工id*
输入名字*
输入中间名
输入姓氏*
输入手机号码*
输入电子邮件Id*
选择适用的用户角色和权限*
提交用户

填写所有字段，然后单击提交。它正在工作

var UserCampusName=“0”；
var EmpID=null；
var FirstName=null；
var LastName=null；
var mobileNo=null；
var=null；
var userRoles=“0”；
$（'SubmitUserRole'）.attr（'disabled'，'disabled'）；
$（函数（）{
$（“#userRoleForm”）.hover（函数（）{
UserCampusName=$（'#UserCampus'）.val（）
EmpID=$（'#UserEmpID'）.val（）
FirstName=$（'#UserEmpFirstName'）.val（）
LastName=$（'#UserEmpLastName'）.val（）
mobileNo=$（'#UserEmpMobileNo'）.val（）
EmpEmail=$（'#UserEmpEmail'）.val（）
userRoles=$（'#Roles'）.val（）
如果（（FirstName.length>0）和&（LastName.length>0）和&（mobileNo.length>0）和&（EmpEmail.length>0）和&（EmpID.length>0）和&（userRoles！=0）和&（UserCampusName！=0））{
$（'SubmitUserRole'）.removeAttr（'disabled'）；
}
否则{
$（'SubmitUserRole'）.attr（'disabled'，'disabled'）；
}
})
})

用户角色和权限设置
选定部门*
--挑选--
输入员工id*
输入名字*
输入中间名
输入姓氏*
输入手机号码*
输入电子邮件Id*
选择适用的用户角色和权限*
提交用户

尝试以下方法：

HTML

<form role="form" class="form-horizontal form-bordered" id="userRoleForm">
   <center>
      <h2>User Roles & Privileges Set-up</h2>
   </center>
   <div class="form-group">
      <label class="label1 col-md-4">Select department <span class="required"> * </span> </label>
      <div class="col-md-7">
         <select class="form-control" id="UserCampus" data-placeholder="Select" tabindex="1">
            <option value="0">--Select--</option>
            <option value="1">Admin</option>
         </select>
      </div>
   </div>
   <div class="form-group">
      <label class="label1 col-md-4">Enter the employee id <span class="required"> * </span> </label>
      <div class="col-md-7">
         <input id="UserEmpID" type="text" class="form-control" />
      </div>
   </div>
   <div class="form-group">
      <label class="label1 col-md-4">Enter First Name <span class="required"> * </span> </label>
      <div class="col-md-7">
         <input id="UserEmpFirstName" type="text" class="form-control"/> 
      </div>
   </div>
   <div class="form-group">
      <label class="label1 col-md-4">Enter Middle Name </label>
      <div class="col-md-7">
         <input id="UserEmpMiddleName" type="text" class="form-control"/> 
      </div>
   </div>
   <div class="form-group">
      <label class="label1 col-md-4">Enter Last Name <span class="required"> * </span> </label>
      <div class="col-md-7">
         <input id="UserEmpLastName" type="text" class="form-control"/> 
      </div>
   </div>
   <div class="form-group">
      <label class="label1 col-md-4">Enter Mobile Number <span class="required"> * </span> </label>
      <div class="col-md-7">
         <input id="UserEmpMobileNo" type="text" class="form-control allownumericwithoutdecimal"/> 
      </div>
   </div>
   <div class="form-group">
      <label class="label1 col-md-4">Enter Email Id <span class="required"> * </span> </label>
      <div class="col-md-7">
         <input id="UserEmpEmail" type="Email" class="form-control"/> 
      </div>
   </div>
   <div class="form-group">
      <label class="label1 col-md-4">Select the applicable user role & privileges <span class="required"> * </span> </label>
      <div class="col-md-7">
         <textarea type="textarea" rowspan="5"> </textarea>
      </div>
   </div>
   <div class="form-group">
      <button class="btn btn-primary" id="SubmitUserRole" type="button" disabled="disabled">submit User</button>
   </div>
</form>

您可以在

if else

中检查尽可能多的输入。在上面的代码中，我没有检查textarea验证，但您可以相应地修改它。

尝试以下操作：

HTML

<form role="form" class="form-horizontal form-bordered" id="userRoleForm">
   <center>
      <h2>User Roles & Privileges Set-up</h2>
   </center>
   <div class="form-group">
      <label class="label1 col-md-4">Select department <span class="required"> * </span> </label>
      <div class="col-md-7">
         <select class="form-control" id="UserCampus" data-placeholder="Select" tabindex="1">
            <option value="0">--Select--</option>
            <option value="1">Admin</option>
         </select>
      </div>
   </div>
   <div class="form-group">
      <label class="label1 col-md-4">Enter the employee id <span class="required"> * </span> </label>
      <div class="col-md-7">
         <input id="UserEmpID" type="text" class="form-control" />
      </div>
   </div>
   <div class="form-group">
      <label class="label1 col-md-4">Enter First Name <span class="required"> * </span> </label>
      <div class="col-md-7">
         <input id="UserEmpFirstName" type="text" class="form-control"/> 
      </div>
   </div>
   <div class="form-group">
      <label class="label1 col-md-4">Enter Middle Name </label>
      <div class="col-md-7">
         <input id="UserEmpMiddleName" type="text" class="form-control"/> 
      </div>
   </div>
   <div class="form-group">
      <label class="label1 col-md-4">Enter Last Name <span class="required"> * </span> </label>
      <div class="col-md-7">
         <input id="UserEmpLastName" type="text" class="form-control"/> 
      </div>
   </div>
   <div class="form-group">
      <label class="label1 col-md-4">Enter Mobile Number <span class="required"> * </span> </label>
      <div class="col-md-7">
         <input id="UserEmpMobileNo" type="text" class="form-control allownumericwithoutdecimal"/> 
      </div>
   </div>
   <div class="form-group">
      <label class="label1 col-md-4">Enter Email Id <span class="required"> * </span> </label>
      <div class="col-md-7">
         <input id="UserEmpEmail" type="Email" class="form-control"/> 
      </div>
   </div>
   <div class="form-group">
      <label class="label1 col-md-4">Select the applicable user role & privileges <span class="required"> * </span> </label>
      <div class="col-md-7">
         <textarea type="textarea" rowspan="5"> </textarea>
      </div>
   </div>
   <div class="form-group">
      <button class="btn btn-primary" id="SubmitUserRole" type="button" disabled="disabled">submit User</button>
   </div>
</form>

---

您可以在

if else

中检查尽可能多的输入。在上面的代码中，我没有检查textarea验证，但您可以相应地修改它。

它工作正常。那你有什么问题？（启用禁用需要悬停）按钮在我填充所有输入时启用。您需要使用其他事件来触发禁用/启用，而不是悬停。在

悬停

中，只有当鼠标退出表单时，您才会看到按钮被启用。在这里，您希望在输入更改时启用该按钮。您需要捕获更改事件。它工作正常。那你有什么问题？（启用禁用需要悬停）按钮在我填充所有输入时启用。您需要使用其他事件来触发禁用/启用，而不是悬停。在

悬停中

仅当鼠标退出表单时，您将看到