直接进入主题:jsp页面源代码
<style>
.ge_table{ width:100%;}
.ge_table td{ height:44px; line-height:26px;}
.hide_border{border: 0px;padding-left: 5px;line-height: 26px;width:205px;height: 26px;}
.ge_input{border:1px solid #ccc;padding-left:5px;line-height:26px;width:205px; height:26px;}
</style>
<table cellpadding="0" cellspacing="0" border="0" class="ge_table">
<tr><td>收货地址:</td>
<td><select id="province" οnchange="selCity()" class="cursor"><option
value="0" selected="selected">请选择</option>
<c:forEach items="${province}" var="province">
<option value="${province.zoneCode}">${province.zoneName}</option>
</c:forEach>
</select> <select id="city" οnchange="selArea()" class="cursor">
<option value="0">请选择</option>
</select> <select id="area" οnchange="selectArea()" class="cursor">
<option value="0">请选择</option>
</select>
</td>
</tr>
<tr>
<td>收货人姓名:</td>
<td >
<input type="text" class="ge_input" id="inputConsignee" οnblur="checkConsignee()" />
<p id="consigneeMsg"></p>
</td>
</tr>
<tr>
<td class="td"><input type="button" class="button2"
id="sure" οnclick="makeSure()" value="确认" /> <input
type="button" class="button2" id="cancle" value="修改"
οnclick="updateMsg()" /></td>
</tr>
</table>
点击确定按钮调用方法:
function makeSure() {
$("#province").attr("disabled", true);
$("#city").attr("disabled", true);
$("#area").attr("disabled", true);
$("input.ge_input").each(function(){
$(this).removeClass().addClass("hide_border").attr("readonly",true);
});
}
}
点击修改按钮调用方法:
function updateMsg(){
$("input.hide_border").each(function(){
$(this).removeClass().addClass("ge_input").attr("readonly",false);
});
}
点击确定按钮之前页面效果:
点击确定按钮之后效果:
点击修改按钮之后,页面效果返回如图一。