WooCommerce Block Checkout Page: disable place_order button

I have been trying to disable the place order button when I have two conflicting shipping types or categories in the cart. At this point, I have gotten down to the most basic code I know how to configure.

The site is running in Wp.local, has only WooCommerce / WooPayment loaded, and a super simple plugin I wrote.

I am not sure how to simplify that any further, but I am willing to take suggestions. :).

The checkout page is the one that came with WooCommerce, and appears to be blocks. I really need to use the block page, because I modified it in the real system to split up shipments if there are items in it that require separate shipping.

So… I have no trouble at all detecting the shipping classes and writing logic to deal with them. In the case of conflicted shipping classes, I just want to disable the “Place Order” button and pop up an alert. Popping up the alert is easy peasy, but disabling or hiding that dang button? Not so much!

Having said that I am sure someone will have a one liner to do it. 🙂

Here is what I have tried, mostly adding an action to go and do the deed.

I have tried tossing an error on the page, which by the documentation, should disable the button. No joy.

        if (in_array($shipping_class, $restricted_classes)) {
            error_log("[RPR] Blocking checkout due to restricted class: {$shipping_class}");
            throw new \Automattic\WooCommerce\StoreApi\Exceptions\CheckoutException(
                __('You cannot place an order with restricted items in your cart.', 'rpr'),
                'woocommerce_restricted_item_error',
                ['status' => 403]
            );

I have tried the Javascript Route, no joy…

add_action('wp_footer', 'dcc_disable_checkout_button_js');
function dcc_disable_checkout_button_js() {
    if (is_cart() && wc_notice_count('error') > 0) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            const checkoutBtn = document.querySelector('.checkout-button');
            if (checkoutBtn) {
                checkoutBtn.setAttribute('disabled', 'disabled');
                checkoutBtn.style.opacity = '0.5';
                checkoutBtn.style.pointerEvents = 'none';
            }
        });
        </script>
        <?php
    }
}

And again…

add_action('wp_footer', 'custom_disable_place_order_button_script');
function custom_disable_place_order_button_script() {
    if (is_checkout()) : ?>
        <script type="text/javascript">
            jQuery(function($){
                // Initially disable the button (optional)
                $('#place_order').prop('disabled', true);
                });
        </script>
    <?php endif;
}

And a whole bunch of variations, like

        $('form.checkout').find('#place_order').prop('disabled', true);

No matter what I do, that stubborn little inanimate object just refuses to disable.

Does anyone have an example of disabling (and re-enabling) this thing that actually works? I am not the world’s most experienced php programmer, so please excuse any ignorance on my part. Heck, I even resorted to asking ChatGPT! It know there was an issue with the new block based checkout, but it’s suggestions to fix it also fell flat. 🙁