A button that transitions to the next screen when you check “I agree with XX”, which is often seen on mail-order sites and sites that make insurance contracts. I think that it will be quite difficult, but I will introduce it because it can be implemented unexpectedly easily using jQuery in WordPress.

Demonstration of a button that can be clicked when checked

What kind of “buttons can be clicked when checked” that can be implemented by this method? So, I would like you to see the demo immediately.

In the demo, if you check next to “I have reviewed and agreed to the terms and conditions and the following important matters”, the color of the “Go to purchase page” button above will change and you can click it (in the demo, click The top page of this site will be displayed in a separate tab). On the contrary, if you do not check it, nothing happens even if you click the button.

*The character string can be changed in the code, and the design can be modified with CSS.

Basically, if you copy and paste and change the character string, you can implement the same design (correction is necessary depending on the theme) and the same function, but if you have the following skills, you can customize it yourself.

• Editing design code (CSS)
• Basic knowledge of html and class elements

[Basic] Let’s make it first

Many of these customized articles suddenly have a high threshold of arranging the files in the theme, so even though I had a hard time doing what was written, it often does not work … so this time Let’s make it work only on the post edit screen for the time being.

For the explanation of each code, refer to “Explanation of each code” at the end of the sentence.

Create a new post

This is probably okay if you’ve arrived at this article. When you add a new post and the edit screen opens, proceed to the next.

1. Insert button HTML

Click Add Block (+ button on the right side of the edit screen) and select a custom HTML block.

Copy the code below.

<div class="div-ha-buy-button">
<button id="ha-buy" class="ha-buy-button" disabled="disabled" type="button" onclick="window.open('URL of the purchase page', '_blank')">Go to purchase page</button>
</div>

2. Insert HTML for check items

Add a new custom HTML block below the block containing the button HTML.

Copy the code below.

<div class="ha-check-button">
<input id="ha-buy-check" type="checkbox"><a href="規約ページのURL" target="blank" rel="noopener">Terms</a>And confirmed and agreed to the following important matters<br><span class="ha-mini-text">If you check it, you can click the button.</span>
</div>
<div class="ha-checkol">
<ol>
<li>What you want to agree</li>
<li>What you want to agree</li>
<li>What you want to agree</li>
</ol>
</div>

3. Insert jQuery to enable the button when checked

Add a new custom HTML block under the HTML of the check item.

Copy the code below.

<script>
jQuery('#ha-buy-check').change(function() {
    //Activate if checked
    if ( jQuery(this).is(':checked') ){ 
        // Enable button
        jQuery('.ha-buy-button').prop('disabled', false);
    } else { 
        // Disable button
        jQuery('.ha-buy-button').prop('disabled', true); 
    }
});
</script>

Insert design code (CSS)

Check to enable the button Add a new custom HTML block below the jQuery block.

Copy the code below.

<style>
/***** A button that can be clicked when checked *****/
.div-ha-buy-button{
margin:0 auto;
text-align:center;
margin-bottom:30px;
margin-top:16px;
}

.ha-buy-button {
    display: block;
    font-size: 1.5em;
    padding: 4px 30px;
    margin: 0 auto;
    margin-top: 16px;
    margin-bottom: 16px;
    color: #fff;
    background: #f44336;
    border: 2px solid #a22f27;
    border-radius: 8px;
    cursor: pointer;
}

.ha-buy-button:hover {
    background: #a22f27;
}

.ha-buy-button:disabled {
    color: #fff;
    background: #eee;
    border: 2px solid #eee;
    pointer-events:none;
}

.ha-checkol {
    display: flex;
    justify-content: center;
    text-align: left;
}

.ha-check-button{
display:block;
text-align:center;
}

.ha-checkol ol {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px;
    font-size:0.8em;
    padding: 0px 36px;
}

.ha-mini-text{
font-size:0.8em;
}

input#ha-buy-check {
    transform: scale(1.8);
    margin-right: 1.2em;
}
</style>

When you’re done, click Save Draft to preview it.

···how was it? Did you see the same demo as the one at the beginning and it worked? (In the copied code, the transition destination after clicking is 404 page because the page cannot be found).

If it doesn’t work, please check “If the button is not clickable even if you check it” in the next section.

If it works normally, change the following contents and the character string to be displayed to any one, and the installation is completed.

1. Change “Purchase page URL” in “Button HTML” to the actual URL
2. Change “URL of agreement page” in “HTML of check items” to the actual URL

If the button is not clickable even if you check it

jQuery may not be enabled

Depending on the theme or plugin you are using, the customization code you inserted, etc., jQuery may not work. Try replacing the code you inserted earlier in “Insert jQuery that activates the button when checked” with the following code.

<script type="text/javascript" src="/wp-includes/js/jquery/jquery.js" id="jquery-core-js"></script>
<script>
jQuery('#ha-buy-check').change(function() {
    // Activate if checked
    if ( jQuery(this).is(':checked') ){ 
        // Enable button
        jQuery('.ha-buy-button').prop('disabled', false);
    } else { 
        // Disable button
        jQuery('.ha-buy-button').prop('disabled', true); 
    }
});
</script>

After replacing, save the draft again and check it in the preview.

There may be a problem with the code loading order

Depending on the environment, it may not be processed correctly due to the problem of the order of the inserted custom HTML blocks.

The problem is the order of the custom HTML blocks of “Insert HTML for check items” and “Insert jQuery that enables the button when checked”, so swap the top and bottom.

After replacing, save the draft again and check it in the preview.

If these two measures do not work, there may be other factors and you will need the skills to investigate and deal with them in detail, so unfortunately you should abandon the introduction to your site. ..

If it works, follow the steps in the next section to make it available on any fixed page or post on your site.

[Application] How to use the functions throughout the site

If you insert the four custom HTML blocks explained so far into any post / fixed page where you want to set a button that you can click if you agree, it will work on that post / fixed page, but by taking the following measures, 2 You will be able to omit one block. For sites that are used frequently, it is recommended to do the following.

We do not recommend direct customization to the parent theme, so the content is based on the assumption that the child theme is used.

The following skills are required for further customization.

• You can create a new file in UTF-8 (without BOM) using a text editor
• You can transfer files into child themes using FTP client tools, server file managers, etc.
• Code can be added to functions.php of child theme (can be dealt with in case of error)
• You can add code to the child theme’s style.css or the theme’s “Additional CSS”

1. Upload jQuery as a file into a child theme

1. Open a text editor on your computer and copy and paste the code below.

jQuery('#ha-buy-check').change(function() {
    // Activate if checked
    if ( jQuery(this).is(':checked') ){ 
        // Enable button
        jQuery('.ha-buy-button').prop('disabled', false);
    } else { 
        // Disable button
        jQuery('.ha-buy-button').prop('disabled', true); 
    }
});

2. Set the file name to “check-button” and the file format to “.js”, and save it in UTF-8 (without BOM).

UTF-8 (without BOM)? May work well if you save it without doing anything, but I don’t recommend it.

3. Upload “check-button.js” in the child theme (same hierarchy as functions.php and style.css).

2. Load jQuery in functions.php

Open functions.php of the child theme, add the following code to the end, and save it.

/***** Button with check function *****/
if ( !function_exists( 'ha_check_button_init' ) ){
function ha_check_button_init(){
  wp_enqueue_script( 'check_button_script', get_stylesheet_directory_uri() .'/check-button.js', array('jquery'), '1.0.0' );	
}
}
add_action( 'wp_enqueue_scripts' , 'ha_check_button_init' );//jsの出力

3. Add design code to style.css or theme “Additional CSS”

Open style.css of the child theme or “Additional CSS” of the theme customizer, add the following code to the end and save it.

/***** A button that can be clicked when checked *****/
.div-ha-buy-button{
margin:0 auto;
text-align:center;
margin-bottom:30px;
margin-top:16px;
}

.ha-buy-button {
    display: block;
    font-size: 1.5em;
    padding: 4px 30px;
    margin: 0 auto;
    margin-top: 16px;
    margin-bottom: 16px;
    color: #fff;
    background: #f44336;
    border: 2px solid #a22f27;
    border-radius: 8px;
    cursor: pointer;
}

.ha-buy-button:hover {
    background: #a22f27;
}

.ha-buy-button:disabled {
    color: #fff;
    background: #eee;
    border: 2px solid #eee;
    pointer-events:none;
}

.ha-checkol {
    display: flex;
    justify-content: center;
    text-align: left;
}

.ha-check-button{
display:block;
text-align:center;
}

.ha-checkol ol {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px;
    font-size:0.8em;
    padding: 0px 36px;
}

.ha-mini-text{
font-size:0.8em;
}

input#ha-buy-check {
    transform: scale(1.8);
    margin-right: 1.2em;
}

4.Display / operation test

After transferring the file into the theme file, adding code, etc., create a new post and insert the following custom HTML block.

Button HTML

<div class="div-ha-buy-button">
<button id="ha-buy" class="ha-buy-button" disabled="disabled" type="button" onclick="window.open('URL of the purchase page', '_blank')">Go to purchase page</button>
</div>

チェック用項目のHTML

<div class="ha-check-button">
<input id="ha-buy-check" type="checkbox"><a href="規約ページのURL" target="blank" rel="noopener">Terms</a>And confirmed and agreed to the following important matters<br><span class="ha-mini-text">If you check it, you can click the button.</span>
</div>
<div class="ha-checkol">
<ol>
<li>What you want to agree</li>
<li>What you want to agree</li>
<li>What you want to agree</li>
</ol>
</div>

When you’re done, save the draft and preview it for confirmation.

If the design is broken (funny), try clearing the cache (keyboard “Ctrl” + “F5”).

When installing a button with this function on other posts or fixed pages, it will work just by inserting “HTML of button” and “HTML of check item”.

Explanation of each code

Finally, I would like you to understand what you are doing with this customization, so I will give a brief explanation of each code.

The basic is jQuery, which divides the process according to “if checked, if not checked”, and the following code.

jQuery('#ha-buy-check').change(function() {
    // Activate if checked
    if ( jQuery(this).is(':checked') ){ 
        // Enable button
        jQuery('.ha-buy-button').prop('disabled', false);
    } else { 
        // Disable button
        jQuery('.ha-buy-button').prop('disabled', true); 
    }
});

The jQuery code usually uses “$” as a prefix, but WordPress distinguishes it from variables, so it’s jQuery! It is necessary to replace it with the declaration, so the above code also does so.

And the operation of the code is quite simple, the part where the CSS class “.ha-buy-button” is assigned to the element with the ID “# ha-buy-check” depending on whether there is a check or not. Is made to process “whether to enable the button” and “whether to disable the button”, which is peculiar to the button tag “disabled”.

If you look at each HTML source introduced in the installation method, “# ha-buy-check” is assigned to the check box for whether you agree, and “.ha-buy-button” is assigned to the button, so the check box If is not checked, the button will be “disabled”, and if it is checked, it will be a normal clickable button.

And since the pseudo element “: disabled” is added to the button processed as “disabled”, the design of the button with the pseudo element and the button without the pseudo element are changed in the design code (CSS).

However, the jQuery code itself is almost the same as the page I referred to in the next section (I changed the ID and class to something that is easy for me to use), understand the mechanism and HTML To be honest, I made the CSS myself.

However, I’m sure there are many people who couldn’t do a lot of research, so I published this article.

I hope it helps someone.

The page that I used as a reference

This page was used as a reference when implementing this function.

【jQuery】チェックしたら有効になるリンクボタン

jQueryでフォームのボタンを有効・無効にする

Update (change) history of this article