Solution 1:
Vérifier que le contenu à changé avec l’événement input (source: Can jQuery check whether input content has changed?).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$('.input-group-field').on('input', function() { var selectElem = $(this); var inputValue = parseInt(selectElem.val()); if(!inputValue || inputValue < 0) { selectElem .next('.js-trigger-add-to-cart') .attr('disabled', 'disabled'); } else { selectElem .next('.js-trigger-add-to-cart') .removeAttr('disabled'); } }); |
Où (optimisé)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$('.input-group-field').on('input', function() { var selectElem = $(this); var inputValue = parseInt(selectElem.val()); var targetElems = selectElem .closest('.input-group') .find('input[type="hidden"], .js-trigger-add-to-cart'); if(!inputValue || inputValue < 0) { targetElems .attr('disabled', 'disabled'); } else { targetElems .removeAttr('disabled', 'disabled'); } }); |
Solution 2:
avec les attributs onkeyup et disabled
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="input-group"> <input type="hidden" name="solrsearchParam[selected_product][${id}]" id="productselect_${id}" value="${id}" disabled="disabled"/> <input tal:condition="canAdd" class="input-group-field" type="text" size="3" value="0" name="solrsearchParam[quantities][${id}]" id="product_${id}" onkeyup=" var selectElem = document.getElementById('btn_productselect_${id}'); var inputValue = parseInt(this.value); if(!inputValue || inputValue < 0) selectElem.setAttribute('disabled', 'disabled'); else selectElem.removeAttribute('disabled');"/> <button id="btn_productselect_${id}" class="button js-trigger-add-to-cart" type="button" disabled="disabled"> <i class="iconfont iconfont-shopping_cart"></i> <span class="show-for-sr">${trans:m.catalog.frontoffice.add-to-cart,ucf}</span> </button> </div> |