Skip to content

Instantly share code, notes, and snippets.

@robertpateii

robertpateii/disable-download-buttons.html

Created October 10, 2011 21:35
Show Gist options
  • Save robertpateii/1276624 to your computer and use it in GitHub Desktop.
Save robertpateii/1276624 to your computer and use it in GitHub Desktop.
Download ZIP
javascript, css, and html I wrote to disable and enable some download buttons based on a checkbox.
Raw
disable-download-buttons.html
<html>
<head>
<style type="text/css">
img.transparentbutton {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
cursor:arrow;
}
</style>
<script type="text/javascript">
jQuery(function() {
// cache the images since they'll be used multiple times
var pcDownloadImage = jQuery('#pcDownloadImage');
var macDownloadImage = jQuery('#macDownloadImage');
// Disable clicking them unless the checkbox is checked
pcDownloadImage.click(function(event) {
if (jQuery('#agreeCheckbox').attr("checked") === false) {event.preventDefault();}
});
macDownloadImage.click(function(event) {
if (jQuery('#agreeCheckbox').attr("checked") === false) {event.preventDefault();}
});
// set defaults for pageload - transparent images and unchecked checkbox
jQuery('#agreeCheckbox').attr("checked",false);
pcDownloadImage.addClass("transparentbutton");
macDownloadImage.addClass("transparentbutton");
// if the checkbox is unchecked and then is checked, make them fully opaque
jQuery('#agreeCheckbox').click(function(){
if (jQuery('#agreeCheckbox').attr("checked") === true) {
pcDownloadImage.removeClass("transparentbutton");
macDownloadImage.removeClass("transparentbutton");
}
else {
pcDownloadImage.addClass("transparentbutton");
macDownloadImage.addClass("transparentbutton");
}
});
});
</script>
</head>
<body>
<p><input type="checkbox" id="agreeCheckbox" /><em>You must agree.</em></p>
<p><a href="#"><img width="230" height="72" id="pcDownloadImage" alt="Download PC Software" src="#" /></a></p>
<p><a href="#"><img width="230" height="72" id="macDownloadImage" alt="Download Mac Software" src="#" /></a></p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment