Your order form has fields for both shipping and billing contact information. You’ve decided to be nice and supply the user with a checkbox that indicates the user’s shipping information and billing information are the same. When checked, the billing text fields should be disabled:
If all you want to do is disable the billing fields, it’s as simple as using the jQuery .attr() and .removeAttr() methods when the change event is triggered:
While selecting a checkbox and disabling the form fields might be enough to get the point across to the user, you could go the extra mile and prepopulate the billing text fields with data from shipping information.
The first part of this solution is the same in structure as the solution shown previously. However, in addition to disabling the billing fields, we are also pre populating them with data from the shipping fields. The following code assumes the shipping and billing <fieldset> elements contain the same number of text inputs and that they are in the same order:
The second part of this solution updates the billing fields automatically when the userenters information into the shipping fields, but only if the billing fields are otherwise disabled:
In the preceding solution I’m using the input:text selector to avoid disabling the checkbox itself.
Using .trigger('change') immediately executes the .change() event. This will check the state of the checkbox initially, in case it is checked by default. Also, this protects against Firefox and other browsers that hold on to radio button and checkbox states when the page is refreshed.
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.