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

Question

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

var UserCampusName = "0";
var EmpID = null;
var FirstName = null;
var LastName = null;
var mobileNo = null;
var EmpEmail = null;
var userRoles = "0";

$('#SubmitUserRole').attr('disabled', 'disabled');

$(function () {
    $("#userRoleForm").hover(function(){
        UserCampusName = $('#UserCampus').val()
        EmpID = $('#UserEmpID').val()
        FirstName = $('#UserEmpFirstName').val()
        LastName = $('#UserEmpLastName').val()
        mobileNo = $('#UserEmpMobileNo').val()
        EmpEmail = $('#UserEmpEmail').val()
        userRoles = $('#Roles').val()
        
        if ((FirstName.length > 0) && (LastName.length > 0) && (mobileNo.length > 0) && (EmpEmail.length > 0) && (EmpID.length > 0) && (userRoles != 0) && (UserCampusName != 0)) {
            $('#SubmitUserRole').removeAttr('disabled');
        }
        else {
            $('#SubmitUserRole').attr('disabled', 'disabled');
        }
    })
})

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<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="Category 0" default disabled selected>--Select--</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">
            <select id="Roles" style="width:100%;" data-placeholder="Select an option" multiple> </select>
        </div>
    </div>
    <div class="form-group">
        <button class="btn btn-primary" id="SubmitUserRole" type="button">submit User</button>
    </div>
</form>

请帮我解决这个问题。

Answer 1

填写所有字段并点击提交。它正在工作

var UserCampusName = "0";
	var EmpID = null;
	var FirstName = null;
	var LastName = null;
	var mobileNo = null;
	var EmpEmail = null;
	var userRoles = "0";
	
	
	$('#SubmitUserRole').attr('disabled', 'disabled');
	
	$(function () {
		$("#userRoleForm").hover(function(){
			UserCampusName = $('#UserCampus').val()
			EmpID = $('#UserEmpID').val()
			FirstName = $('#UserEmpFirstName').val()
			LastName = $('#UserEmpLastName').val()
			mobileNo = $('#UserEmpMobileNo').val()
			EmpEmail = $('#UserEmpEmail').val()
			userRoles = $('#Roles').val()
			
			if ((FirstName.length > 0) && (LastName.length > 0) && (mobileNo.length > 0) && (EmpEmail.length > 0) && (EmpID.length > 0) && (userRoles != 0) && (UserCampusName != 0)) {
				$('#SubmitUserRole').removeAttr('disabled');
			}
			else {
				$('#SubmitUserRole').attr('disabled', 'disabled');
			}
			})
	})

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<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="Category 0" default disabled selected>--Select--</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">submit User</button>
		</div>
	
</form>