前端页面部分字段禁用

前情提要:

需求是如果“与员工关系”为本人时,后面的归属人信息不需要写,为了省去后台的验证操作,可直接在页面进行处理。

遇到的问题:当选择“与员工关系”时(下拉框),要给一个事件,将后面的字段设置为禁用。但是不知道应该给什么事件,或者是给谁一个事件。

html代码:(后面重复代码省略)

<div class="row form-layout">
	<div class="col-md-2 form-name ">
		<span style="color: red">*</span> 与员工关系:
	</div>
	<div class="col-md-2 form-select" id='relationWithEmpLi'>
		<input id="relationWithEmp" name="relationWithEmp" type="text" data-value="${serviceObj.relationWithEmp}" readonly="readonly"/>
	</div>
											
	<div class="col-md-2 form-name">
	    <span style="color: red"></span> 归属人姓名:
    </div>
	<div class="col-md-2 form-input">
		<input id="ownerName" name="ownerName" type="text" value=""/>
	</div>
											
	<div class="col-md-2 form-name ">
		<span style="color: red"></span> 归属人企业简称:
	</div>
	<div class="col-md-2 form-input">
		<input id="ownerEnterpriseAbbreviation" name="ownerEnterpriseAbbreviation" type="text" value=""/>
	</div>
</div>

后来经过前端同事的提醒,知道了应该给谁什么事件。

因为“与员工关系”为下拉框,我们点击时是对ul的li进行的操作,所以应该是给li一个点击事件即可。

js代码如下:

$("#relationWithEmpLi .select_ul li").click(function(){
        //$("#signupForm input[name='relationWithEmp']").attr('data-value',"");
        var valueCheckBox = $(this).attr('data-value');
        if(valueCheckBox == '01'){
            $("#signupForm input[name='ownerEmployeeIdType']").attr('data-value',"");
            $("#signupForm input[name='ownerEmployeeIdType']").val("");
            $("#ownerName").val("");
            $("#ownerEnterpriseAbbreviation").val("");
            $("#ownerEmployeeNum").val("");
            $("#ownerEmployeeIdNum").val("");
            $("#signupForm input[name='ownerEmployeeIdType']").attr('disabled',true);
            $("input[name='ownerName']").attr('disabled',true);
            $("input[name='ownerEnterpriseAbbreviation']").attr('disabled',true);
            $("input[name='ownerEmployeeNum']").attr('disabled',true);
            $("input[name='ownerEmployeeIdNum']").attr('disabled',true);
        }else{
            $("#signupForm input[name='ownerEmployeeIdType']").attr('disabled',false);
            $("input[name='ownerName']").attr('disabled',false);
            $("input[name='ownerEnterpriseAbbreviation']").attr('disabled',false);
            $("input[name='ownerEmployeeNum']").attr('disabled',false);
            $("input[name='ownerEmployeeIdNum']").attr('disabled',false);
        }
});

猜你喜欢

转载自blog.csdn.net/Scarlett1994/article/details/82690987
今日推荐