jQuery in Action
Adding new wrapper methods
205
<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>
</body>
</html>
We won't belabor the operation of this page, as it's relatively straightforward. The
only truly interesting aspect of this page is the click handler attached to the check
box in the ready handler. When the state of the check box is changed by a click we
only truly interesting aspect of this page is the click handler attached to the check
box in the ready handler. When the state of the check box is changed by a click we
1
Copy the checked state into variable
same
for easy reference in the
remainder of the listener.
2
Set the values of the billing address fields. If they are to be the same, we
set the values from the corresponding fields in the shipping address
information. If not, we clear the fields.
set the values from the corresponding fields in the shipping address
information. If not, we clear the fields.
3
Call the new
setReadOnly()
command
b
on all input fields in the billing
address container.
But, oops! We were a little sloppy with that last step. The wrapped set that we cre-
ate with
ate with
$('#billingAddress
input')
contains not only the text fields in the billing
address block but the check box too. The check box element doesn't have read-
only semantics, but it can have its opacity changed--definitely not our intention!
only semantics, but it can have its opacity changed--definitely not our intention!
Luckily, this sloppiness is countered by the fact that we were not sloppy
when defining our plugin. Recall that we filtered out all but text fields before
applying the remainder of the commands in that method. We highly recom-
mend such attention to detail, particularly for plugins that are intended for
public consumption.
applying the remainder of the commands in that method. We highly recom-
mend such attention to detail, particularly for plugins that are intended for
public consumption.
What are some ways that this command could be improved? Consider making
the following changes:
We forgot about text areas! How would you modify the code to include text
areas along with the text fields?
areas along with the text fields?