需求分析如下:
用户输入两组用户信息:一组是送货目的地,另一组是账单组目的地。在大多数情况下,这两个地址是一致的。让用户重复输入两次相同的信息会导致用户友好度降低,而这非
我们所想。
通过给账单地址添加复选框,意在指示账单地址是否与送货地址一致。如果选中复选框,就从送货地址复制账单地址并且设为只读状态;如果取消选中复选框,就从文本字段里
清空账单地址和只读状态。
<fieldset>
<legend>The Test form</legend>
<div>
<form name="testForm" action="">
<div>
<label>First name:</label>
<input type="text" name="firstname" id="firstname" />
</div>
<div>
<label> Last name:</label>
<input type="text" name="lastname" id="lastname" />
</div>
<div id="shopingAddress">
<h2>Shop address</h2>
<div>
<label> Stress address:</label>
<input type="text" name="shopAddress" id="shopAddress" />
</div>
<div>
<label> City,state,zip:</label>
<input type="text" name="shopCity" id="shopCity" />
<input type="text" name="shopState" id="shopState" />
<input type="text" name="shopZip" id="shopZip" />
</div>
</div>
<div id="billingAddress">
<h2>Bill address</h2>
<div>
<input type="checkbox" id="sameAddressControl" /></label><label for="sameAddressControl">Billing address is same as shop address.</label>
</div>
<div>
<label> Stress address:</label>
<input type="text" name="billAddress" id="billAddress" />
</div>
<div>
<label> City,state,zip:</label>
<input type="text" name="billCity" id="billCity" />
<input type="text" name="billState" id="billState" />
<input type="text" name="billZip" id="billZip" />
</div>
</div>
</form>
</div>
</fieldset>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
(function($){
$.fn.setReadonly = function(readonly){
return this.filter('input:text')
.attr('readonly',readonly)
.css({'opacity':readonly ? 0.5 : 1.0});
};
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
$('#sameAddressControl').click(function(){
var same = this.checked;
$('#billAddress').val(same?$('#shopAddress').val():'');
$('#billCity').val(same?$('#shopCity').val():'');
$('#billState').val(same?$('#shopState').val():'');
$('#billZip').val(same?$('#shopZip').val():'');
$('#billingAddress input').setReadonly(same);
});
});
</script>