checkbox 之内容一致与只读状态

来源：互联网发布：cms色彩管理系统下载编辑：程序博客网时间：2024/06/04 19:44

需求分析如下:

用户输入两组用户信息：一组是送货目的地，另一组是账单组目的地。在大多数情况下，这两个地址是一致的。让用户重复输入两次相同的信息会导致用户友好度降低，而这非

我们所想。

通过给账单地址添加复选框，意在指示账单地址是否与送货地址一致。如果选中复选框，就从送货地址复制账单地址并且设为只读状态；如果取消选中复选框，就从文本字段里

清空账单地址和只读状态。

<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>

0 0