How to disabled quantity buttons on cart page

Below is some sample code to disable quantity buttons on the cart page.

These code snippets are used to assign a variable opcdisabled to true if the line item is an Option Price Calculator added product.

                    {%- if item.product.has_only_default_variant == false
                      or item.properties.size != 0
                      or item.selling_plan_allocation != null
                    -%}
                      <dl>
                      
                        {%- comment -%} This is used to marked quantity disabled for opc products {%- endcomment -%}
                        {% assign opcdisable = false %}
                        {%- if item.variant.title contains 'opc-' -%}
                           {%  assign opcdisable = true %}
                        {%- endif -%}
 
                        {%- if item.product.has_only_default_variant == false -%}
                         
                          {%- for option in item.options_with_values -%}
                          
                             {% unless option.value contains 'opc-' %}
                              <div class="product-option">
                                <dt>{{ option.name }}:</dt>
                                <dd>{{ option.value }}</dd>
                              </div>
                            {% endunless %}
                          {%- endfor -%}
                        {%- endif -%}

  
                        {%- for property in item.properties -%}
                          {%- assign property_first_char = property.first | slice: 0 -%}
                          {%- if property.last != blank and property_first_char != '_' -%}
                            
                              {%- comment -%} This is used to marked quantity disabled for opc products {%- endcomment -%}          
                              {%- if property.last contains 'opc-' -%}
                                 {%  assign opcdisable = true %}
                              {%- endif -%}
                            
                             {% unless property.last contains 'opc-' %}
                              <div class="product-option">
                                <dt>{{ property.first }}:</dt>
                                <dd>
                                  {%- if property.last contains '/uploads/' -%}
                                    <a href="{{ property.last }}" class="link" target="_blank">
                                      {{ property.last | split: '/' | last }}
                                    </a>
                                  {%- else -%}
                                    {{ property.last }}
                                  {%- endif -%}
                                </dd>
                              </div>
                             {% endunless %}
                          {%- endif -%}
                        {%- endfor -%}

This code is for quantity buttons. We conditionally add disabled attribute to the quantity input to disabled the element.

    <div class="cart-item__quantity-wrapper">
                      <label class="visually-hidden" for="Quantity-{{ item.index | plus: 1 }}">
                        {{ 'products.product.quantity.label' | t }}
                      </label>
                      <quantity-input class="quantity cart-quantity"   {%- if opcdisable -%} disabled {%- endif -%}>
                        <button class="quantity__button no-js-hidden" name="minus" type="button"  {%- if opcdisable -%} disabled {%- endif -%}>
                          <span class="visually-hidden">
                           {{- 'products.product.quantity.decrease' | t: product: item.product.title | escape -}}
                          </span>
                          {% render 'icon-minus' %}
                        </button>
                        <input
                          class="quantity__input"
                          data-quantity-variant-id="{{ item.variant.id }}"
                          type="number"
                          name="updates[]"
                          value="{{ item.quantity }}"
                          {% # theme-check-disable %}
                          data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
                          min="{{ item.variant.quantity_rule.min }}"
                          {% if item.variant.quantity_rule.max != null %}
                            max="{{ item.variant.quantity_rule.max }}"
                          {% endif %}
                          step="{{ item.variant.quantity_rule.increment }}"
                          {% # theme-check-enable %}
                          aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
                          id="Quantity-{{ item.index | plus: 1 }}"
                          data-index="{{ item.index | plus: 1 }}"
                          {%- if opcdisable -%} disabled {%- endif -%}
                        >
                        <button class="quantity__button no-js-hidden"  name="plus" type="button" {%- if opcdisable -%} disabled {%- endif -%}>
                          <span class="visually-hidden">
                            {{- 'products.product.quantity.increase' | t: product: item.product.title | escape -}}
                          </span>
                          {% render 'icon-plus' %}
                        </button>
                      </quantity-input>

                      <cart-remove-button
                        id="Remove-{{ item.index | plus: 1 }}"
                        data-index="{{ item.index | plus: 1 }}"
                      >
                        <a
                          href="{{ item.url_to_remove }}"
                          class="button button--tertiary"
                          aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}"
                        >
                          {% render 'icon-remove' %}
                        </a>
                      </cart-remove-button>
                    </div>

You might want to restyle disabled quantity buttons. Here is some CSS to do that.

quantity-input[disabled] {
    background-color: lightgrey;
}
.quantity__button[disabled] {
    cursor: auto;
    color: grey;
}
.quantity__input[type=number] {
        color: grey;
}