如果单击另一个输入,则禁用输入

时间:2015-04-08 14:07:53

标签: javascript jquery html twitter-bootstrap

我在表单中有三个部分,第一个包含一个输入,第二个包含三个输入,第三个包含一个复选框。如何

  1. 如果选中复选框,则禁用这两个部分
  2. 如果我点击了其他部分中的文字,则禁用该复选框和部分
  3. 启用三个部分(如果所有部分都为空)
  4. 每次我必须只有一个活动部分。

    我所做的不是解决方案,因为第二部分存在问题。如果本节中只有一个输入为空,则启用所有其他输入。任何人都可以帮助我。 谢谢,抱歉我的英文

    
    
    document.getElementById("client").onblur = function () {
                if (this.value.length > 0) {
                    document.getElementById("FirstName").disabled=true;
                    document.getElementById("LastName").disabled=true;
                    document.getElementById("Email").disabled=true;
                    document.getElementById("standard").disabled=true;
                }else {
                    document.getElementById("FirstName").disabled=false;
                    document.getElementById("LastName").disabled=false;
                    document.getElementById("Email").disabled=false;
                    document.getElementById("standard").disabled=false;
                }
            }
            
            document.getElementById("FirstName").onblur = function () {
                if (this.value.length > 0) {
                    document.getElementById("client").disabled=true; 
                    document.getElementById("standard").disabled=true;
                }else {
                    document.getElementById("client").disabled = false;
                    document.getElementById("standard").disabled = false;
                }
            }
            document.getElementById("LastName").onblur = function () {
                if (this.value.length > 0) {
                    document.getElementById("client").disabled=true; 
                    document.getElementById("standard").disabled=true;
                }else {
                    document.getElementById("client").disabled = false;
                    document.getElementById("standard").disabled = false;
                }
            }
            document.getElementById("Email").onblur = function () {
                if (this.value.length > 0) {
                    document.getElementById("client").disabled=true; 
                    document.getElementById("standard").disabled=true;
                }else {
                    document.getElementById("client").disabled = false;
                    document.getElementById("standard").disabled = false;
                }
            }
            document.getElementById("standard").onblur = function () {
                if (this.checked) {
                    document.getElementById("client").disabled=true; 
                    document.getElementById("FirstName").disabled=true;
                    document.getElementById("LastName").disabled=true;
                    document.getElementById("Email").disabled=true;
                }else {
                    document.getElementById("client").disabled=false; 
                    document.getElementById("FirstName").disabled=false;
                    document.getElementById("LastName").disabled=false;
                    document.getElementById("Email").disabled=false;
                }
            }
    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row">
    	<div class="col-md-4">
    		<div class="row">
    			<div class="form-group col-md-12">
    				<label>Search Client</label>
    			</div>
    		</div>
    		<div class="row">
    			<div class="form-group col-md-12">
    				<div class="input-group custom-search-form margin-bottom">
    					<input id="client" name="client" type="text" class="form-control input-sm" placeholder="Search...">
    					<span class="input-group-btn">
    						<button class="btn btn-default btn-sm" type="button">
    							<i class="fa fa-search"></i>
    						</button>
    					</span>
    				</div>
    			</div>
    		</div>
    	</div>
    	<div class="col-md-8">
    		<div class="row">
    			<div class="form-group col-md-12">
    				<label>New Client</label>
    			</div>
    		</div>
    		<div class="row">
    			<div class="form-group col-md-4">
    				<input type="text" class="form-control input-sm" id="FirstName" placeholder="First Name">
    			</div>
    			<div class="form-group col-md-4">
    				<input type="text" class="form-control input-sm" id="LastName" placeholder="Last Name">
    			</div>
    			<div class="form-group col-md-4">
    				<input type="email" class="form-control input-sm" id="Email" placeholder="Email">
    				
    			</div>
    		</div>
    	</div>
    </div>
    
    <div class="checkbox margin-bottom">
    	<label>
    		<input id="standard" type="checkbox" value="">Standard
    	</label>
    </div>
    &#13;
    &#13;
    &#13;

1 个答案:

答案 0 :(得分:0)

听起来你可能想要尝试焦点监听器而不是on Blur监听器。

https://developer.mozilla.org/en-US/docs/Web/Events/focus

当我输入所有字段的值时,第二个元素似乎有效。看起来它正在检查输入的长度。