Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save KustomDeveloper/9a7632deb4e38319b52607ca6efaa8a9 to your computer and use it in GitHub Desktop.

Select an option

Save KustomDeveloper/9a7632deb4e38319b52607ca6efaa8a9 to your computer and use it in GitHub Desktop.
<div class="checkbox checkbox-text">
<label><span id="clicker"><input type="checkbox" name="custom_type" data-custom-type="agree" value="agree_tc"></span>Yes! I agree to your stupid terms of service. Geeesh!</label>
</div>
<div class="fake-button" style="display: block;">YES, PROTECT MY FAMILY NOW &gt;&gt;</div>
<script>
$(document).ready(function() {
//Add class to submit button
//MUST USE #ID OF YOUR SUBMIT BUTTON
$('#MY_SUBMIT_BUTTON_ID').addClass('buttonIsNotVisible');
//Toggle classes and hide fake button
$('#clicker').click(function() {
$('#MY_SUBMIT_BUTTON_ID').toggleClass('buttonIsNotVisible');
$('.fake-button').toggle();
$('.checkbox-error').toggle();
})
$('.fake-button').click(function() {
if($('#clicker').is(':checked')) {
$('.checkbox-error').hide();
} else {
//Only show error message if it doesn't exist yet
if (!$('.checkbox-error').length) {
$('.checkbox-text').append('&lt;div class=&quot;checkbox-error&quot;&gt;Hey You! You must check the checkbox to place an order.&lt;/div&gt;');
}
}
});
});
</script>
<style>
.fake-button {
color: rgb(255, 255, 255);
font-weight: 600;
background-color: rgb(48, 147, 23);
font-size: 20px;
background: #ccc;
padding: 11px 0;
border-radius: 3px;
margin: 0 auto;
text-align: center;
width: 100%;
}
.checkbox-error {
color:red;
}
</style>
@doodz2
Copy link
Copy Markdown

doodz2 commented Jan 20, 2022

Hey man, can I ask how this code works? been trying to setup but I am having difficulties on it. I'm not a familiar with codes, I just want to this for my order page. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment