Today we had a requirement to have a EULA (End User License Agreement) checkbox checked before we could allow a user to click a download button. Let's look how we could do it with jQuery. (I'm going to skip the un-important or self explanatory code.)
You can view the full example on this page.
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<style type="text/css">
.disabledObject {
opacity: 0.5;
}
</style>
1<style type="text/css">
2 .disabledObject {
3 opacity: 0.5;
4 }
5</style>
While not required, this is going to make the button a little prettier when disabled.
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){
// Disabled the buttons if the eula isn't checked
$('#eula').click(function(){
if ($(this).is(':checked')) {
$('#content button').removeAttr('disabled').removeClass('disabledObject');
}
else {
$('#content button').attr('disabled', 'disabled').addClass('disabledObject');
}
})
});
</script>
1<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
2
3<script type='text/javascript'>
4$(function(){
5 // Disabled the buttons if the eula isn't checked
6 $('#eula').click(function(){
7 if ($(this).is(':checked')) {
8 $('#content button').removeAttr('disabled').removeClass('disabledObject');
9 }
10 else {
11 $('#content button').attr('disabled', 'disabled').addClass('disabledObject');
12 }
13 })
14});
15</script>
In the HEADof our document, we're going to include jQuery off the Google CDN. You could use your own server/cdn or use code to prevent your site breaking if Google is unavailable.
The next SCRIPT block is the real core of the functionality. We're setting up a click-binding that will fire every time the EULA checkbox is clicked. We then determine if it is "checked" and then disable or enable the button accordingly.
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<input type="checkbox" value="1" id="eula" name="eula"> I agree to the EULA
<p>
<button id="downloadNow" class="disabledObject" name="downloadNow" type="button" disabled="disabled">Download Now</button>
</p>
1<input type="checkbox" value="1" id="eula" name="eula"> I agree to the EULA
2 <p>
3 <button id="downloadNow" class="disabledObject" name="downloadNow" type="button" disabled="disabled">Download Now</button>
4 </p>
In this last section, we output the checkbox and the button. We set it to disabled by default and add a disabled class. You can view the full working example.
My core expertise focuses on architecting multi-lingual, enterprise-level digital solutions, including custom CMS's and large-scale applications which span multiple devices and computing languages.
Comments
There are no comments for this entry.
[Add Comment] [Subscribe to Comments]