Disable Checkout Button if additional Cart Notes not filled

[Markitosline]

Hi there!

Theme is RIDE 2.0 (old)

We have built-in "additional notes" in the cart/basket section right before going to checkout.

This is located in the footer of the cart as below described:

      {%- if settings.show_cart_note -%}
        <cart-note class="cart__note field">
         <label for="Cart-note">{{ 'sections.cart.note' | t }}</label>
         <textarea class="text-area field__input" name="note" form="cart" id="Cart-note" placeholder="{{ 'sections.cart.note' | t }}">{{ cart.note }}</textarea>
        </cart-note>
      {%- endif -%}

We need this to be mandatory so that when someone tries to submit the checkout button this does not occur unless there is text in this additional details textarea.

This is how the to submit button behaves as of now:

<div class="cart__ctas" {{ block.shopify_attributes }}>
                <noscript>
                  <button type="submit" class="cart__update-button button button--secondary" form="cart">
                    {{ 'sections.cart.update' | t }}
                  </button>
                </noscript>

                <button style="tdisplay: none" type="submit" id="checkout" class="cart__checkout-button button" name="checkout"{% if cart == empty %} disabled{% endif %} form="cart">
                  {{ 'sections.cart.checkout' | t }}
                </button>
              </div>

I've introduced at the end of the code of this section the below code to try and disable the submit button but had no luck, not sure how to work around it.

<script> 
$(document).ready(function(){
  $('.cart__checkout-button button').attr('disabled',true);
  $('.text-area field__input').keyup(function(){
      if($(this).val().length !=0)
          $('.cart__checkout-button button').attr('disabled', false);            
      else
          $('.cart__checkout-button button').attr('disabled',true);
  })
});
</script>

Any suggestions around how to make it work would be much appreciated

Thanks!

[niraj_patel]

Hello @Markitosline 
it is possible via adding jquery and some liquid code to default button disable and if someone checked checkbox button will be ready to go checkout.