Necesito ayuda para deshabilitar/habilitar un botón basado en una opción de selección desplegable.
Estoy tratando de lograr dos cosas en una página de producto de Shopify y estoy a mitad de camino. Necesito crear una opción para que los clientes decidan si quieren comprar un producto complementario además del producto principal. Tengo un menú desplegable con tres opciones: Seleccionar, No y Sí. Cuando eligieron Sí, aparece el elemento con el producto. Esa parte está funcionando. Sin embargo, quiero deshabilitar el botón Agregar al carrito cuando la opción está en la opción predeterminada 'Seleccionar' para que se vean obligados a hacer una selección antes de que puedan agregar el artículo al carrito.
Aquí está el código hasta ahora. He intentado varias cosas basadas en búsquedas, pero parece que no puedo hacerlo bien. El botón Agregar al carrito se encuentra en un formulario separado justo encima del código del producto adicional.
<form> <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if settings.addto_btn_an %} btnzoom{% endif %}"> <span id="AddToCartText-{{ section.id }}"> Add To Cart </span> </button> </form> <script type="text/javascript"> function ShowHideDiv() { var pfa_option = document.getElementById("pfa_option"); var pfa_select = document.getElementById("pfa_select"); pfa_select.style.display = pfa_option.value == "Y" ? "block" : "none"; } </script> <span>Do you need a Print for Approval (PFA)?</span> <select required id="pfa_option" onchange="ShowHideDiv()"> <option value="S">Select</option> <option value="N">No</option> <option value="Y">Yes</option> </select> <hr /> <div id="pfa_select" style="display: none"> <div class=add-on-product-style> <form method="post" action="/cart/add"> <input type="hidden" name="id" value="41287631601846" /> <input type="hidden" value="1" id="quantity" name="quantity" /> Add Print for Approval +$25.00 <button type="submit" name="add" class="btn product-form__cart-submit">Add</button> <input type="hidden" name="return_to" value="back" /> </form> </div> </div>