jQuery not working for custom checkbox on checkout page

Question

I am looking to create a custom checkbox field on the checkout process that a customer can click to define if they are a business customer or a consumer.

To do so I made a module with the file SomeProcessor.php:

    <?php
namespace BusinessCheckout\CustomCheckout\Block\Checkout;

class SomeProcessor
{
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array  $jsLayout
    ) {

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_checkbox'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => '.custom_checkbox',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/checkbox',
                'options' => [],
                'id' => 'custom-field'
            ],
            'dataScope' => '.custom_checkbox',
            'label' => 'Is this a business order? Business T&C\'s apply.',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [],
            'sortOrder' => 50,
            'id' => 'custom-field'
        ];


        return $jsLayout;
    }
}
?>

All good so far and the checkbox appears on the checkout page as expected.

Now I've added the following jQuery to the footer of the site:

<script type="text/javascript">

jQuery(document).ready(function() {

  jQuery('form input[name="custom_checkbox"]').attr('checked', false)
  jQuery('form input[name="company"]').prop("disabled", true);

  jQuery('form input[name="custom_checkbox"]').click(function() {

    if (jQuery(this).prop("checked") == true) {

      jQuery('form input[name="company"]').prop("disabled", false);

    } else if (jQuery(this).prop("checked") == false) {

      jQuery('form input[name="company"]').prop("disabled", true);

    }

  });

});

</script>

It seems working when I enter it directly into console but not on the site footer.

The expected functionality is to have the checkbox unchecked when the page loads and the company field disabled. Then if the user clicks the checkbox the company field becomes enabled.

Any thoughts on how I can get this working?

kunj · Accepted Answer · 2018-07-11 08:22:06Z

Try this:

I have updated your code from 'component' => 'Magento_Ui/js/form/element/abstract', To 'component' => 'BusinessCheckout_CustomCheckout/js/form/element/customCheckbox',.

    <?php
namespace BusinessCheckout\CustomCheckout\Block\Checkout;

class SomeProcessor
{
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array  $jsLayout
    ) {

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_checkbox'] = [
             'component' => 'BusinessCheckout_CustomCheckout/js/form/element/customCheckbox',
            'config' => [
                'customScope' => '.custom_checkbox',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/checkbox',
                'options' => [],
                'id' => 'custom-field'
            ],
            'dataScope' => 'custom_checkbox',
            'label' => 'Is this a business order? Business T&C\'s apply.',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [],
            'sortOrder' => 50,
            'id' => 'custom-field'
        ];


        return $jsLayout;
    }
}
?>

Now create new customCheckbox.js file in this path 'BusinessCheckout/CustomCheckout/frontend/web/js/form/element/' And put tthis content in that new customCheckbox.js JS file.

 define([
    'Magento_Ui/js/form/element/abstract',
    'jquery',
    'uiRegistry'
], function (abstractComponent,jQuery,uiRegistry) {
    uiRegistry.get("checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.company", function (element) {
        element.disable();
    });
    return abstractComponent.extend({
        hasChanged: function () {
            if (this.value() == true) {
                jQuery('form input[name="company"]').prop("disabled", false);
            } else if (this.value() == false) {
                jQuery('form input[name="company"]').prop("disabled", true);
            }
            return this._super();
        }
    });
});

That hasChanged methode will call while click for check and un-check.

Please run php bin/magento cache:flush and php bin/magento setup:static-content:deploy command after the changes.

This works in some way however once the page load the checkbox is unchecked and the field is enabled. Only once clicked and unclicked does it function as expected. It should be so that the page loads with the checkbox unchecked and the field disabled. — Alexander, Commented Jul 10, 2018 at 16:09
Awesome, that updated code works perfectly! Thanks a lot for the help. — Alexander, Commented Jul 12, 2018 at 10:11
Welcome, happy to help you and I learn new thing about uiRegistry. we can run custom script after load all UI JS and Content. — kunj, Commented Jul 12, 2018 at 10:16

Ronak Patel · Accepted Answer · 2018-07-11 08:51:31Z

Try this code

Main issue is wrong jquery event.

Your code

jQuery('form input[name="custom_checkbox"]').click(function() {

Replace with

jQuery(document).on('change', 'form input[name="custom_checkbox"]', function(e) {

Full code

<script>
require(['jquery'], function($){
    $(document).ready(function(){

        $('form input[name="custom_checkbox"]').attr('checked', false)
        $('form input[name="company"]').prop("disabled", true);
        $(document).on('change', 'form input[name="custom_checkbox"]', function(e) {
            if ($(this).prop("checked") == true) {

              $('form input[name="company"]').prop("disabled", false);

            } else if ($(this).prop("checked") == false) {

              $('form input[name="company"]').prop("disabled", true);

            }
        });
    });
});
</script>

@Alexander try this code its work
– Ronak Patel
Commented Jul 11, 2018 at 7:41 — Ronak Patel, Commented Jul 11, 2018 at 7:41

Rahul Singh · Accepted Answer · 2018-06-29 06:57:03Z

1

Try to use script like this way:

<script>
require(['jquery', 'jquery/ui'], function(jQuery){ 
 jQuery(document).ready(function(){

  jQuery('form input[name="custom_checkbox"]').attr('checked', false)
  jQuery('form input[name="company"]').prop("disabled", true);

  jQuery('form input[name="custom_checkbox"]').click(function() {

    if (jQuery(this).prop("checked") == true) {

      jQuery('form input[name="company"]').prop("disabled", false);

    } else if (jQuery(this).prop("checked") == false) {

      jQuery('form input[name="company"]').prop("disabled", true);

    }

  });
});

});
</script>

edited Jun 29, 2018 at 6:57

answered Jun 29, 2018 at 6:49

Rahul Singh

1,6502 gold badges20 silver badges40 bronze badges

Still no luck with this unfortunately. Same as before, it works when inputted directly into console but when in the footer nothing happens.
– Alexander
Commented Jun 29, 2018 at 8:22
If it helps at all here is a link to the site that might give a better idea of what's going on: bit.ly/1resXVE
– Alexander
Commented Jun 29, 2018 at 8:40

Add a comment |

Sukumar Gorai · Accepted Answer · 2018-07-05 11:54:52Z

Try the below code:

require(['jquery', 'jquery/ui'], function($){ 
    setTimeout(function(){
        $('form input[name="custom_checkbox"]').attr('checked', false)
        $('form input[name="company"]').prop("disabled", true);

        $('.checkout-index-index form').on('click', 'input[name="custom_checkbox"]', function() {
            if ($(this).prop("checked") == true) {
                $('form input[name="company"]').prop("disabled", false);
            } else if ($(this).prop("checked") == false) {
                $('form input[name="company"]').prop("disabled", true);
            }
        });
    }, 3000);
});

You need use setTimeout for this as Magento 2 load checkout through knockout. On page load elements are not present in the DOM due to this your jquery is not working. You can adjust the time 3000 to your value by checking the time which is perfect for rendering.

No luck with this unfortunately, even after increasing setTimeout. It seems to work fine in console but when in the footer/header nothing. — Alexander, Commented Jul 10, 2018 at 16:16
Can you add custom js file through XML and add the above code to that custom js file and test again — Sukumar Gorai, Commented Jul 10, 2018 at 16:35

Rakesh Jesadiya · Accepted Answer · 2018-07-06 09:26:12Z

You need to keep below code in your JS,

<script>
require(["jquery","domReady!"],function(jQuery) {
    jQuery('form input[name="custom_checkbox"]').attr('checked', false)
    jQuery('form input[name="company"]').prop("disabled", true);

    $('body').on("click",'form input[name="custom_checkbox"]',function() {
        if (jQuery(this).prop("checked") == true) {
          jQuery('form input[name="company"]').prop("disabled", false);
        } else if (jQuery(this).prop("checked") == false) {
          jQuery('form input[name="company"]').prop("disabled", true);
        }
    });
});
</script>

Prashant Valanda · Accepted Answer · 2018-07-08 06:38:14Z

You need to rewrite form.html knockout template of Magento_Checkout in your theme.

app\design\frontend\Vendorname\Themename\Magento_Checkout\web\template\billing-address\form.html

replace below div

<div class="billing-address-form" data-bind="fadeVisible: isAddressFormVisible">

to

<div class="billing-address-form" data-bind="fadeVisible: isAddressFormVisible, afterRender: renderedHandler">

Rewrite billing-address.js in your theme

app\design\frontend\Vendorname\Themename\Magento_Checkout\web\js\view\billing-address.js

add below function in above js file

       /**
         * after form render handler
         *
         */
        renderedHandler: function (elements, data) {
         require(['jquery', 'jquery/ui'], function(jQuery){ 
          jQuery(document).ready(function() {

          jQuery('form input[name="custom_checkbox"]').attr('checked', false)
          jQuery('form input[name="company"]').prop("disabled", true);

          jQuery('form input[name="custom_checkbox"]').click(function() {

          if (jQuery(this).prop("checked") == true) {

              jQuery('form input[name="company"]').prop("disabled", false);

          } else if (jQuery(this).prop("checked") == false) {

              jQuery('form input[name="company"]').prop("disabled", true);

          }

          });

         });
         });
        }

PG Sutariya · Accepted Answer · 2018-07-11 12:55:49Z

<script type="text/javascript">
require(['jquery'], function($){
    $(document).ready(function() {
        var flag = 0;
        var existCondition = setInterval(function() {
            if ($('form input[name="custom_checkbox"]').length) {
                if ($('form input[name="custom_checkbox"]').prop("checked") == true) {
                    $('form input[name="custom_checkbox"]').attr('checked', false);
                    flag++;
                }
            }
            if ($('form input[name="company"]').length) {
                if ($('form input[name="company"]').prop("disabled") == false) {
                    $('form input[name="company"]').prop("disabled", true);
                    flag++;
                }
            }

            if(flag == 2) {
                clearInterval(existCondition);
            }
        }, 100);

        $(document).delegate('form input[name="custom_checkbox"]', 'click change', function () {
            if (jQuery(this).prop("checked") == true) {

                jQuery('form input[name="company"]').prop("disabled", false);

            } else if (jQuery(this).prop("checked") == false) {

                jQuery('form input[name="company"]').prop("disabled", true);

            }
        });
    });
});

Twinkle Gupta · Accepted Answer · 2021-05-31 10:07:41Z

0

add this in footer js it will work

$(document).ajaxComplete(function()  {
  //add your code here        
});

answered May 31, 2021 at 10:07

Twinkle Gupta

334 bronze badges

Add a comment |

Stack Exchange Network

jQuery not working for custom checkbox on checkout page

8 Answers 8

Your Answer

Not the answer you're looking for? Browse other questions tagged
magento2
checkout
javascript
jquery
or ask your own question.

Hot Network Questions

jQuery not working for custom checkbox on checkout page

8 Answers 8

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged magento2checkoutjavascriptjquery or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
magento2
checkout
javascript
jquery
or ask your own question.