jQuery-Deaktiviertaste, wenn einer der Eingänge leer ist

Question

Eine Schaltfläche ist standardmäßig deaktiviert. Es gibt zwei Texteingaben. Wenn beide leer sind, sollte das Formular deaktiviert bleiben. Wenn beide Felder einen Wert haben, sollte die Schaltfläche aktiviert sein.

dieser Versuch ...

$(document).ready(function(){ 
    $('#custNameNext').prop('disabled',true); 
    $('#customer').keyup(function(){ 
     $(this).val($(this).val().replace(/[^\w\s]+/g, '')); 
     $('#custNameNext').prop('disabled', ((this.value == '') || ($('#customerCost').val() == '')) ? true : false); 
    }); 
}); 

... aber b/c ich in einem keyup bin, wird die Schaltfläche nicht aktivieren, wenn ich Werte in beiden Bereichen haben, und dann wieder auf das erste Feld mit der Taste und geben Sie zusätzlichen Text ein.

Haben Probleme, dies durch zu denken!

Answer 1

Dies sollte für Sie arbeiten:

$(document).ready(function() { 
 
    $('#custNameNext').prop('disabled', true); 
 

 
    function validateNextButton() { 
 
    var buttonDisabled = $('#customer').val().trim() === '' || $('#customerCost').val().trim() === ''; 
 
    $('#custNameNext').prop('disabled', buttonDisabled); 
 
    } 
 

 
    $('#customer').on('keyup', validateNextButton); 
 
    $('#customerCost').on('keyup', validateNextButton); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form> 
 
    <input id="customer" name="first-input" type="text"> 
 
    <input id="customerCost" name="second-input" type="text"> 
 
    <input id="custNameNext" type="submit" value="Submit" disabled="disabled"> 
 
</form>

I habe die IDs eingefügt hatte bereits in Ihrem Schnipsel. Als Vorschlag wäre es besser, lange Codezeilen wegzulassen und sie in kohärentere zu teilen.

Die Testanweisung, die in buttonDisabled gehalten wird, kann geändert werden, benötigen Sie eine andere Validierung, damit die Übergabeschaltfläche aktiviert wird (z. B. Regex).

Answer 2

Sie können dem Ereignishandler beide Eingaben hinzufügen, und indem Sie das Ereignis input verwenden, erfassen Sie auch das Einfügen und einige andere Szenarien.

Dann einfach auf den Werten filtern, um nachzusehen, ob eine von ihnen sind leer

$(document).ready(function() { 
    $('#custNameNext').prop('disabled', true); 

    $('#customer, #customerCost').on('input', function() { 
      var val = $('#customer, #customerCost').filter(function() { 
       return this.value.trim().length !== 0; 
     }).length === 0; 

     $('#custNameNext').prop('disabled', val); 
    }); 
}); 

FIDDLE