Dans l’exemple qui suit, on procède à cette vérification pour désactiver une fonctionnalité de Collapse (Bootstrap) des champs de formulaires si du texte est saisi.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="form-group address-extra-info-trigger"> <span class="control-label"> <spring:theme code="address.line2"/> </span> <button id="triggerBillingAddressExtraInfo" class="btn-naked" type="button" data-toggle="collapse" data-target="#collapseBillingAddressExtraInfo" aria-expanded="false" aria-controls="collapseBillingAddressExtraInfo"> <span class="show-extra-fields"> <i class="glyphicon glyphicon-chevron-down"></i> <spring:theme code="naos.show"/></span> <span class="hide-extra-fields"> <i class="glyphicon glyphicon-chevron-up"></i> <spring:theme code="naos.hide"/></span> </button> </div> <div class="collapse address-extra-info-fields" id="collapseBillingAddressExtraInfo"> <input type="text" id="one" /> <input type="text" id="two" /> <input type="text" id="three" /> [...] </div> |
Si un seul champ à vérifier:
Si le champ qui a le focus n’est pas vide, on agit sur #triggerBillingAddressExtraInfo en ajoutant un style inline pointer-events: none; (qui désactive la possibilité de cliquer sur l’élément).
|
1 2 3 4 5 6 7 8 9 10 11 |
$('input').on('input', function(e){ var toto = $(this).val(); console.log(toto); if(!toto == ''){ $('#triggerBillingAddressExtraInfo').css('pointer-events', 'none'); } else{ $('#triggerBillingAddressExtraInfo').removeAttr('style'); } }); |
Si plusieurs champs à vérifier:
Sources: jQuery check if any text input has value et Detect changed input text box.
Si le champ qui a le focus n’est pas vide, on agit sur #triggerBillingAddressExtraInfo en ajoutant un style inline pointer-events: none; (qui désactive la possibilité de cliquer sur l’élément).
On ajoute la condition: si tous les champs au sein de #collapseBillingAddressExtraInfo sont vides, on retire le style inline pointer-events: none;.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function hasValue(elem) { return $(elem).filter(function() { return $(this).val(); }).length > 0; } $('input', '#collapseBillingAddressExtraInfo').on('input', function(e){ var toto = $(this).val(); var titi = hasValue('#collapseBillingAddressExtraInfo input'); // console.log(toto); // console.log(titi); if(!toto == ''){ $('#triggerBillingAddressExtraInfo').css('pointer-events', 'none'); } else if(!titi == true) { $('#triggerBillingAddressExtraInfo').removeAttr('style'); } }); |
Mieux, avec deux fonctions
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function hasValue(elem) { return $(elem).filter(function() { return $(this).val(); }).length > 0; } function deactivateCollapse(collapseElement, triggerElement){ $('input', collapseElement).on('input', function(e){ var focusedInputValue = $(this).val(); var inScopeInputsValues = hasValue(collapseElement+' input'); if(!focusedInputValue == ''){ $(triggerElement).css('pointer-events', 'none'); } else if(!inScopeInputsValues == true) { $(triggerElement).removeAttr('style'); } }); } deactivateCollapse('#collapseBillingAddressExtraInfo', '#triggerBillingAddressExtraInfo'); deactivateCollapse('#collapseDeliveryAddressExtraInfo', '#triggerDeliveryAddressExtraInfo'); |